Question

我有以下基于标签菜单格式的HTML代码，即：

 <div id="listnav">
  <ul id="nav">
     <li id="home"><a href="#" id="current">Home</a></li>
     <li id="features"><a href="#">Features</a></li>
     <li id="whysp"><a href="#">Why sP</a></li>
     <li id="screenshots"><a href="#">Screen Shots</a></li>
     <li id="faq"><a href="#">FAQ</a></li>
     <li id="contactus"><a href="#">Contact Us</a></li>
   </ul>
 </div>

首次进入网页时，我的“主页”标签会根据a href标记中的id =“current”设置为当前。

我的问题是，当用户点击“功能”标签时，我如何通过jQuery从主页选项卡中删除class = current并添加到功能href标签，以便我的功能选项卡现在显示为当前标签等与其他标签一起使用？

我还有以下jQuery函数：

$("#home").click(function(){
    $("#content").load('home.html');
});

$("#features").click(function(){
    $("#content").load('features.html');
});

任何帮助都会很棒。

感谢。

Answer 1

$('#nav a').click(function(){
   $("#nav").find("a").removeAttr("id");
   $(this).attr("id" , "current" );
});

Answer 2

试试这个：

$('#nav a').click(function(){
 $(this).attr('id','current').parent('li').siblings()
        .children('a').removeAttr('id');
});

Answer 3

我认为您可以使用名为“current”的类，然后使用.removeClass()和.addClass()删除/添加。

Answer 4

$("#features").click(function(){
    $("#current").removeAttr("id");
    $("#features a").attr("id", "current");
    $("#content").load('features.html');
});

我建议使用班级而不是ID

Answer 5

无需为每个链接重复导航代码： - ）

$("#nav li a").click(function()
{
    // Remove old current
    $("#current").removeAttr("id");
    // Set new current
    $(this).attr("id", "current");
    // Load content for clicked nav
    $("#content").load($(this).closest("li").attr("id") + '.html');
    // Prevent click from jumping to the top of the page
    return false;
});

在选项卡的菜单菜单之间移动“当前”类

5 个答案: