Develop Reference

Dynamic Tabs - Link works only if clicked

So i have tried this tutorial and the tabs work flawlessly:
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h
But the problem is as follows:
I am able to click on the tabs and navigate, but if i use the link directly to a specific tab, it will open the first (default) tab.
Example:
Appending #menu2 does not open the tab assigned with the id #menu2 when visiting the link http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h#menu2
Thank you!

Maybe you should try this:
$( document ).ready( function( ) {
var hash = document.location.hash;
if( hash.length > 1 ) {
$( "a[href='" + hash + "']" ).trigger( "click" );
}
} );
It checks if there is a hash when the document opens, and then clicks on the correct link
If you add it in between "<script></script>" in the "tryit", and click on "See results", you'll see it happen.
Ex:

That's because bootstraps menu works through javascript, not through the actual anchors.
When clicking on a tab a javascript function is activated that sets an active class on the tab and the content pane, which will cause the tab to be highlighted and the content to be display: block and not display: none anymore (which is the default).
You would have to read the anchor from the URL when generating the page and then set the active classes depending on that.
Addition:
Alternatively you could use the javascript snippet as suggested by #VirginieLGB, but then you will have a short moment of transition every time the page is loaded. Especially when you have a bigger page that takes longer to load, you may have to wait a little for the document to be "ready" so the function starts working. In that timespan, the first tab will be displayed before transitioning and showing the second tab.

I think what you are asking is:
When you click a tab you want a new page to open and the active tab to be shown.
The css indicates the active tab as having the class .active
you will need to append the .active class to the relevant tab on the newly opened page.

How to change html element ( li ) class in Asp.Net?

I have a list ul (its id is menu_) with multiple elements li, these lis are initially in class in-active, I want when the client click on one li to be redirected to another page and then change the CssClass of this li to active. I've tried this JS code but didn't work, it didn't redirected to the another page after client click an li (it remains in the same page):
$(function () {
$('#menu_ li').click(function () {
$("li.active").removeClass("active");
$(this).addClass("active");
return false;
});
});

You can do this inside each page.
$("li.active").removeClass("active");
$( "ul#menu li:nth-child(n)" ).addClass("active");
Keep this code in ready event.
n is number of li that you want to add class to.

You are mixing server-side/client-side functionality here. Your JS code is purely client-side and it will toggle the classes correctly, but having return false; means that the link will not be followed, so no redirection will be performed (no server side code will be run).
You could remove return false; and then the classes will be changed and the redirection will be performed, but once the redirect has been done, you have a new page and the class changes will not persist.
You basically have three options:
Have a JS code as Imadoddin Ibn Alauddin suggest above inside each child page which takes care of setting the correct element in the navigation to active once the page loads.
Somehow persist the state between requests, once you add the active class, save the state in a cookie or local storage for example. Then every time a page loads, check if the cookie/local storage contains such data and update the state accordingly.
Change the state of the navigation on the server side, so once each page loads, add the active class to the corresponding page.
I'd recommend option 3.
Bottom line: You cannot mix things like you are doing now. Having return false; will cancel the redirection out. Once the redirection is performed, a new page will load and the navigation will be reset so any change you made using JS before the redirection was done is gone.

Prevent closing of a navbar with another element's trigger click

I am using jasny bootstrap offcanvas navbar ( http://jasny.github.io/bootstrap/components/#navmenu-offcanvas ) which will close whenever a click event occurs elsewhere on the page. However, we have a Twitter feed that has been modified to move between 3 different Twitter accounts. In order to switch between them a click is triggered. This is causing the navmenu to close each time the tweets switch and I cannot seem to prevent it.
Here is the twitter scroll code:
var tabCarousel = setInterval(function() {
var tabs = $('#twittertab > li'),
active = tabs.filter('.active'),
nextone = active.next('li'),
toClick = nextone.length ? nextone.find('a') : tabs.eq(0).find('a');
toClick.trigger('click');
}, 5000)
I've tried applying preventDefault() and stopPropagation() to the trigger('click') but I am very inexperienced with jQuery and am really just guessing where to put this.

For anyone having a similar issue, the answer is simple if you don't mind sacrificing the navbar closing with any click outside of the navbar itself. Ie, the solution means clicking outside the navbar will not close it.
Simply add 'data-autohide="false"'to the offcanvas element.
I then added a function to toggle the navbar state on click of a link within the navbar as follows;
$('#my-menu > li > a').click(function() {
$('.navmenu').offcanvas('toggle');
});
This means if you have links that do not go to another page, but an anchor somewhere on the same page, the menu will close when you click to move to that section.

If you are want to close the navmenu on inside link click then you must add "data-autohide="false"" on this
<div class="navmenu navmenu-default navmenu-fixed-right offcanvas">
and add this script $(document).ready(function(){$('.navmenu a').click(function() {
$('.navmenu').offcanvas('hide');
});})
in your code. that's it.
Note: It's work like charm in single page application.

How can I higlight the current page by changing image on my menu?

This is one of the lines in my div nav:
<img class="swap5" src="/Static/Images/Meny_normal_06.png" alt="" />
When someone click on this image they will get redirected to another page and I want this image to get swapped to my other image that is darker which highlights the current page.
to
<--- highlighted one that I want to change to while its current page
Here is my Jquery:
<script type="text/javascript">
$(document).ready(function () {
$('.swap5').click(function () {
$(this).attr('src', '/Static/Images/Meny_clicked_01.png');
});
});
</script
>
I realized that this wont do it, beacuse the new image is gone by the time i get redirected to the other page..
How can I do this in a smooth way? I am using MVC 3 btw
any kind of help is appreciated

What about running this on the view you are redirecting to instead of the page you are redirecting from?
<script type="text/javascript">
$(document).ready(function () {
$('.swap5').attr('src', '/Static/Images/Meny_clicked_01.png');
});
</script>

You can use plain javascript to achieve that. Give the image element an id, let's say "me".
do something like
document.getELmentById("me").setAttribute("src", "link to your other image");
the

You can use a cookie in such cases.. As soon as the button is clicked you can store that info in a cookie.
In the next page check the cookie , if the value you expect was stored then replace the new image on the redirected page..

Forget about jquery, i can do it using css.
Use an .active class on the current page.
Ex:-
Define a class
.active{background:url(/image/activemenu.jpg);}
Use the class on the current page to highlight the nav.
li> class="active"> a href="#"> ORDER /a> /li>

Active links don't show the class name added when the page is refreshed or when the same link is clicked from another page

Script:
$(".classname li a").each(function() {
var hreflink = $(this).attr("href");
if (hreflink == location.href) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
CSS:
.classname li a.active{color:#ef9223;}
Whenever I do a page refresh, if the same link is on a different page, the active class is no longer applied to that link.
Actual exmple
i have the following Navigation links A B C D E F G H .... Z. And the same Navigation is in the main page(header section).. so when i click on any one link .. it needs to be active on when i arrive to any one A B C D E..or Z pages. And even on page refresh it needs to retain the active link. Hope that explains...and helps :)
Any help, inputs, solution would be much appreciated.

Inside of your each loop, this is actually the anchor tag not the tag that has the class 'classname'. Your css should be:
.active {color:#ef9223;}
Also, you do not need the remove class if this code is being run on page load.
CHeck out this jsFiddle for an example - http://jsfiddle.net/XWLWL/7/

A class, or anything that you add with JavaScript does not persist on page refresh. That's just how it works.
JavaScript is only modifying your locally loaded HTML elements and structure. Once you refresh the page, or go to another page, all of that state is cleared out by the incoming page load. The server has no knowledge of anything you did on that page. It will send a new page with the default state, and any JavaScript will then run. This script also has no knowledge of any previous page loads or script execution.
If you want state to persist across page loads, you need to do it at the server side, which involves making AJAX calls to the server to let it know what links you want to be "active", and then the server would be responsible for adding that class on subsequent page loads.