javascript - 突出显示 onclick 菜单链接

Question

我无法突出显示“当前”链接。链接的布局很简单，如下所示：

主页 | 关于 | 乔丹

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

我试过使用这个功能：

$(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 {颜色:#3558b0}

Answer 1

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

Answer 2

如果您可以摆脱onclick（即使用），那么您可以仅使用 CSShref来做到这一点。你不需要 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>

这是一个 jfiddle：http: //jsfiddle.net/fUL3w/10/

Answer 3

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

初学者试试这个：

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

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

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

经验法则：为标记保留标记，为脚本保留脚本；不要混合。（例如避免使用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 4

虽然您的 JQuery 代码有效，但您的标记不正确。我为您提供了以下工作演示：

JSFIDDLE