Question

＆GT;

我试过这段代码：

$(function(){
$('ul li a').on('click', function(){
    $(this).parent().addClass('current').siblings().removeClass('current');
  });
});

http://jsfiddle.net/GG7ZZ/

如果我使用＃作为链接

，它会起作用

<ul>
                <li class="current"><a href="#">menu item1</a></li>
                <li><a href="#aaa">menu item2</a></li>
                <li><a href="#bbb">menu item3</a></li>
                <li><a href="#ccc">menu item4</a></li>
                <li><a href="#ddd">menu item5</a></li>
                <li><a href="#eee">menu item6</a></li>
            </ul>

but when i change those #links into a real link as in #ccc to ccc.php and so on for the rest of the link and click onto the ccc.php for example as below
<ul>
                    <li class="current"><a href="menu1.php">menu item1</a></li>
                    <li><a href="aaa.php">menu item2</a></li>
                    <li><a href="bbb.php">menu item3</a></li>
                    <li><a href="ccc.php">menu item4</a></li>
                    <li><a href="ddd.php">menu item5</a></li>
                    <li><a href="eee.php">menu item6</a></li>
                </ul>

下面是我的整体代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
            <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
                <script type="text/javascript" charset="utf-8">

            $(function(){
                    $('ul li a').on('click', function(){
                        $(this).parent().addClass('current').siblings().removeClass('current');
                      });
                    });
                </script>


        </head>
        <body>
           <ul>
                <li class="current"><a href="menu1.php">menu item1</a></li>
                <li><a href="aaa.php">menu item2</a></li>
                <li><a href="bbb.php">menu item3</a></li>
                <li><a href="ccc.php">menu item4</a></li>
                <li><a href="ddd.php">menu item5</a></li>
                <li><a href="eee.php">menu item6</a></li>
            </ul>

</body>
</html>

。它会将高亮显示从“菜单项1”更改为“菜单项4”，之后它会立即将高亮显示改回“菜单项1”。我不知道它错过了什么吗？

谢谢。

Answer 1

您的链接会更改页面，因此您必须在页面加载时突出显示正确的链接（因为javascript在到达新页面时“丢失”），这意味着您必须识别当前页面并将类添加到右侧链接相应

Answer 2

您应该按如下方式阻止链接的默认行为

如果你想使用你在href中输入的链接，那么就可以使用this.href

$(function(){
       $('ul li a').on('click', function(e){
       e.preventDefault();
       $(this).parent().addClass('current').siblings().removeClass('current');
       /* you can use this.href that contain the href value */
  });
});

如何制作<a> links into a real functional links to work after using jQuery classRemove and add?</a>

2 个答案: