这是我的菜单。我正在使用Metro UI模板。
<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>
页面加载时，默认显示“主页”菜单，其内容标签为“tab_home”。
在这里，我有一个名为“tab_masters”的标签内容，其中有一个名为“btnStoreMaster”的按钮。当用户点击此按钮时，它将被重定向到StoreMaster.aspx页面。
它的重定向，但其相应的菜单“Masters”并未突出显示。再次显示主菜单选项卡内容。如何使用JQuery或JavaScript在焦点菜单中进行聚焦？
这是我的jQuery函数，
$("#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");
})
});
此处，菜单css已更改，但我无法将其相应的标签内容显示更改为阻止。
答案 0 :(得分：1)
使用这个jQuery代码：
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
// now grab every link from the navigation
$('#divMenu a').each(function () {
// and test its normalized href against the url pathname regexp
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});});
如果href等于位置设置活动类，则获取当前页面的位置以及每个标记的位置 但你已经可以使用它了：
$(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");
}
})
}
})
})
我只是判断你需要
$("#divMenu div").each(function () {
alert(this.value);
if ($(this).attr("id") == "tab_masters"){
$(this).css("display", "block");
}
else{
$(this).css("display", "none");
}
})
答案 1 :(得分：0)
我通过使用以下代码实现了这一目标：
$("#divMenu > ul li").each(function () {
if ($(this).attr("id") == "limasters") {
$(this).addClass("active");
}
else {
$(this).removeClass("active");}
})
$("#divMenu > div > .tab-panel").each(function () {
if ($(this).attr("id") == "tab_masters") {
$(this).css("display", "block");
}
else {
$(this).css("display", "none");
}
})