Javascript 突出显示onclick菜单链接

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

家约乔登

例如，一旦用户单击某个链接，该特定链接将突出显示

我已尝试使用此功能：

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

HTML

CSS

#菜单li a.current{color:355880}

---

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

首先，请尝试以下方法：

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

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

---

我仍然不确定您希望实现什么，因为在

window.location

加载之后，您应用的任何类都将在下一次页面访问中讨论（除非您使用的是AJAX）。但是，您可以引用

$this.prop（'href'）

，并在单击事件中根据需要使用它。

尽管JQuery代码有效，但标记不正确。我为您准备了以下工作演示：

---

如果您可以去掉

onclick

（即使用

href

），那么您可以仅使用CSS来实现这一点。您不需要jQuery代码。请看这里：

CSS:

HTML

这里有一把小提琴：

---

如果只使用

href

属性，可以使用

：active

伪类查看。（当

href

完全相同时，我认为没有理由使用

onclick=“window.location”

）我同意@bradcristie。另外，jQuery代码中连接的click事件是否会运行，或者在冒泡到jQuery click事件之前，jQuery代码中的onclick属性是否会重定向到新页面？如果是这样，他的jQuery点击事件代码将永远无法运行。在2012年编写内联javascript是一种犯罪。感谢您的快速响应。我正在使用onclick直接打开about页面中的#azuki和#jordon ui选项卡（jquery）。@user1652920请记住勾选接受我的答案（以便将来的观众知道它是正确的），谢谢！谢谢你的回复。我使用onclick直接打开about页面中的#azuki和#jordon选项卡（ui jquery）。如果我去掉onclick并使用href，我就无法打开about页面中的about.action？c=azuki选项卡或about.action？c=jordon选项卡。@user1652920:不需要，jQueryUI选项卡。它将查看

href

属性并为您加载它。是的，这是正确的。使用onclick，我能够正确地单击和加载ui选项卡。但是，我无法突出显示菜单链接。@user1652920:如果您使用的是jQuery选项卡，为什么不能使用添加

#菜单ui状态活动a{color:355800；}

？谢谢。如果我去掉onclick，这就行了；但是，为了正确加载about.action？c=azuki和about.action？c=jordon，我必须使用onclick。about.action？c=jordon和about.action？c=azuki是about页面中的选项卡（ui jquery）。

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

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

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

<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();
    }); 
});

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

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

<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>