Question

我有一个简单的导航菜单：

<ul>
<li><a href="index.php" id="home_menu">Home</a></li>
<li><a href="purchase.php"  class="selected" id="information_menu">Information</a></li>
<li><a href="purchase.php" id="contact_menu">Contact</a></li>
</ul>

我正在尝试设置要选择的正确菜单项。有些菜单会有子菜单，所以我不认为我想通过它的URL来做，所以我在每个页面中设置了一个元数据标签，其中包含正确的标签ID：

<meta name="selected_nav_tab" content="home" />

然后通过jQuery获取id：

$(document).ready(function () {

//set appropriate nav menu to selected
$('#nav li a').removeClass('selected');

//determine which tab should be selected
var selected_tab = $('meta[name=selected_nav_tab]').attr("content");
});

如何使用该ID（“var selected_tab”）选择主页选项卡？

类似的东西：

$(#selected_tab).addClass('selected');

可能没什么好事......

感谢你再次拯救我，

托德

Answer 1

试试这个：

$('#' + selected_tab + '_menu').addClass('selected');

您的变量selected_tab仅包含home或其他内容，但您的id与home_menu类似，依此类推，#需要id选择器。

所以正确的选择器看起来像#home_menu等。

Answer 2

作为您的HTML代码

如果＆＃39; _menu＆＃39;你可以尝试总是在那里。

$('#' + selected_tab +'_menu').addClass('selected');

或者如果您想选择检查其内容。

$('#nav li a').contains(selected_tab).addClass('selected');

Answer 3

设置所选标签选项。首先，您必须获取要选择的选项卡的索引。

http://jqueryui.com/demos/tabs/#option-selected

// Get jQuery object of the tabs element (assuming #nav is where you use the tabs plugin on)
var $tabs = $('#nav');

// Get selected tab id (this is the id right?)
var selected_tab = $('meta[name=selected_nav_tab]').attr('content');

// Get the index of the tab we are going to select
var selected_index = $tabs.find('li').index($tabs.find('li#' + selected_tab));

// Select the tab
$tabs.tabs('option', 'selected', selected_index);

使用基于id的jQuery选择nav选项卡

3 个答案: