高亮显示单击菜单链接

Highlighting onclick menu link

本文关键字：链接 菜单 单击 显示 高亮      更新时间：2023-09-26

我在突出显示"当前"链接时遇到问题。链接的布局很简单，比如：

主页|关于| Jordon

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

我试过使用这个功能：

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

#菜单li a.current｛color:#3558b0｝

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

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

JsFIDDLE

元素级事件将在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有机会preventDefault()/取消事件之前触发并设置window.location。我的建议是按照预期使用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')，并在单击事件中使用它来进行任何需要的操作。

如果可以去掉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>

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

相关文章：