Question

我无法保持现有的＆＃39;链接突出显示链接简单地布置如下：

主页|关于|乔丹

例如，一旦用户点击某个链接，该特定链接就会突出显示。

我尝试过使用此功能：

$(document).ready(function() {
$("#menu li a").click(function (e) {
        e.preventDefault();
        $("#menu li a").addClass("current").not(this).removeClass("current");
}); 
});

HTML

  <div class="main">
        <div id="menu">
            <ul>
                <li><a onclick="window.location='index.action'" href="#" class="current">Home</a></li>
                <li><a onclick="window.location='about.action?c=azuki'" href="#">About</a></li>
                <li><a onclick="window.location='about.action?c=jordon'" href="#">Jordon</a></li>
                <li>                </ul>           </div>
                </div>

CSS

#menu li a.current {color：＃3558b0}

Answer 1

$('#menu').on( 'click', 'a', function() {
$('#menu a').removeClass( 'current' );
$(this).addClass( 'current' );
});

Answer 2

元素级事件将在jQuery（或附加的任何其他库）之前触发。你的问题是执行顺序。

首先尝试这个：

<div id="menu">
  <a onclick="alert('First');">Helllo, World!</a>
</div>

$('a').on('click',function(e){
  alert('Second');
  e.preventDefault();
  return false;
});

onclick在jQuery有机会window.location /取消事件之前触发并设置preventDefault()。我的建议是按照预期使用href并在HTML上进行jQuery调整。

经验法则：保留Markup用于脚本的标记和脚本;不要混。（例如，避免使用onclick属性。）

如果您遵循该规则，则向后兼容旧版浏览器/已禁用JavaScript的浏览器，同时仍为新版浏览器提供扩展功能。您现在可以通过允许缓存功能而不是每个标记中嵌入的重复任务来节省带宽。

话虽如此，试试这个：

<div id="menu">
  <ul>
    <li><a href="index.action" class="current">Home</a></li>
    <li><a href="about.action?c=azuki">About</a></li>
    <li><a href="about.action?c=jordon">Jordon</a></li>
  </ul>
</div>

$(function() {
    $('#menu a').on('click',function (e) {
        var $this = $(this);
        $this.closest('ul').find('a').removeClass('current');
        $this.addClass('current');
        e.preventDefault();
    }); 
});

我仍然不确定你希望完成什么，因为在window.location加载你申请的任何课程后，在下一页的访问中都没有实际意义（除非你使用的是AJAX）。但是，您可以参考$this.prop('href')并在点击事件中使用它，无论您需要什么。

Answer 3

虽然您的JQuery代码有效，但您的标记不合适。我已经为您准备了以下工作演示：

JsFIDDLE

Answer 4

如果您可以摆脱onclick（即使用href），那么您可以使用 CSS ONLY 执行此操作。你不需要jQuery代码。见这里：

CSS：

#menu li a.current {color:#3558b0}

#menu li a:active,
#menu li a:focus{
 color:#fff;
background-color:red;   
}

HTML

<div class="main">
        <div id="menu">
            <ul>
                <li><a  href="#" class="current">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a  href="#">Jordon</a></li>
                <li>                </ul>           </div>
                </div>

Heres a jfiddle： http://jsfiddle.net/fUL3w/10/

突出显示onclick菜单链接

4 个答案: