c# - Change CSS of li tag which is inside div and ul tag : jQuery or JavaScript -
this menu. using metro ui template.
<div id="divmenu" class="fluent-menu" data-role="fluentmenu" data-on-special-click="specialclick"> <ul class="tabs-holder"> <li id="litabhome" class="active"><a href="#tab_home">home</a></li> <li id="litabmailings" class=""><a href="#tab_mailings">mailing</a></li> <li id="litabfolder" class=""><a href="#tab_folder">folder</a></li> <li id="litabview" class=""><a href="#tab_view">view</a></li> <li id="limasters" class="active"><a href="#tab_masters">masters</a></li> </ul> <div class="tabs-content"> <div class="tab-panel" id="tab_home" style="display: block;"> <div class="tab-panel-group"> <div class="tab-group-content"> <button class="fluent-big-button"> <span class="icon mif-envelop"></span> create<br /> message </button> <div class="tab-content-segment"> <button class="fluent-big-button dropdown-toggle"> <span class="icon mif-file-picture"></span> <span class="label">create<br /> element</span> </button> <ul class="d-menu" data-role="dropdown" style="display: none;"> <li><a href="#">message</a></li> <li><a href="#">event</a></li> <li><a href="#">meeting</a></li> <li><a href="#">contact</a></li> </ul> </div> <div class="tab-content-segment"> <button class="fluent-big-button"> <span class="mif-cancel"></span> <span class="label">delete</span> </button> </div> </div> <div class="tab-group-caption">clipboard</div> </div> <div class="tab-panel-group"> <div class="tab-group-content"> <div class="tab-content-segment"> <button class="fluent-button"><span class="mif-loop"></span>replay</button> <button class="fluent-button"><span class="mif-infinite"></span>replay all</button> <button class="fluent-button"><span class="mif-loop2"></span>forward</button> </div> <div class="tab-content-segment"> <button class="fluent-tool-button"> <img src="metrocss/docs/images/notebook-save.png" /></button> <button class="fluent-tool-button"> <img src="metrocss/docs/images/folder-rename.png" /></button> <button class="fluent-tool-button"> <img src="metrocss/docs/images/calendar-next.png" /></button> </div> </div> <div class="tab-group-caption">reply</div> </div> <div class="tab-panel-group"> <div class="tab-group-content"> <div class="input-control text"> <input type="text" /> <button class="button"><span class="mif-search"></span></button> </div> <button class="fluent-button"><span class="icon-book on-left"></span>address book</button> <div class="tab-content-segment"> <button class="fluent-button dropdown-toggle"> <span class="mif-filter on-left"></span> <span class="label">mail filters</span> </button> <ul class="d-menu" data-role="dropdown"> <li><a href="#">unread messages</a></li> <li><a href="#">has attachments</a></li> <li class="divider"></li> <li><a href="#">important</a></li> <li><a href="#">broken</a></li> </ul> </div> </div> <div class="tab-group-caption">search</div> </div> </div> <div class="tab-panel" id="tab_masters" style="display: none;"> <div class="tab-panel-group"> <div class="tab-group-content"> <button class="fluent-big-button" id="btnstoremaster"> <span class="icon mif-envelop"></span> store master </button> </div> </div> </div> </div> </div> when page loads, default "home" menu showing content tab "tab_home".
here, have tab content called "tab_masters" has button called 'btnstoremaster". when user clicks button, redirected storemaster.aspx page.
its redirecting, corresponding menu "masters" not highlighting. again shows home menu tab contents. how make focus in clicked menu using jquery or javascript?
this jquery function,
$("#btnstoremaster").click(function () { $("#divmenu ul li").each(function () { //alert($(this).attr("id")); if ($(this).attr("id") == "limasters") { $(this).addclass("active"); } else $(this).removeclass("active"); }) $("#divmenu div").each(function () { alert(this.value); if ($(this).attr("id") == "tab_masters") $(this).css("display", "block"); else $(this).css("display", "none"); }) }); here, menu css has changed, not change corresponding tab content display block.
use jquery code:
$(function () { var url = window.location.pathname, urlregexp = new regexp(url.replace(/\/$/, '') + "$"); // create regexp match current url pathname , remove trailing slash if present collide link in navigation in case trailing slash wasn't present there // grab every link navigation $('#divmenu a').each(function () { // , test normalized href against url pathname regexp if (urlregexp.test(this.href.replace(/\/$/, ''))) { $(this).addclass('active'); } });}); its take location of current page , each tag if href equals location set active class can use this:
$(function () { $("#btnstoremaster").click(function () { var url = window.location.pathname, urlregexp = new regexp(url.replace(/\/$/, '') + "$"); $('#divmenu a').each(function () { if (urlregexp.test(this.href.replace(/\/$/, ''))) { $(this).addclass('active'); $("#divmenu div").each(function () { alert(this.value); if ($(this).attr("id") == "tab_masters"){ $(this).css("display", "block"); } else{ $(this).css("display", "none"); } }) } }) }) i adjudge need
$("#divmenu div").each(function () { alert(this.value); if ($(this).attr("id") == "tab_masters"){ $(this).css("display", "block"); } else{ $(this).css("display", "none"); } }) to something. new cod executing when clicking on tab, take location or current page(storemaster.aspx) ,set active class , want! hope work you.
Comments
Post a Comment