Question

如何使用jquery或javascript在html中突出显示所选菜单项。以下是menu.html。

<div id="cssmenu">
<ul>
    <li id="m1"><a href="company.html">COMPANY</a></li>
    <li id="m2"class="has-sub"><a href="services.html">SERVICES</a></li>
    <li id="m3"class="has-sub"><a href="abotus.html">ABOUT US</a></li>
    <li id="m4"class="has-sub"><a href="contact.html">CONTACT US</a></li>
 </ul>
</div>

<script type="text/javascript">
  function makeactive(id) {
    m1=document.getElementById('m1');
    m2=document.getElementById('m2');
    m3=document.getElementById('m3');
    m4=document.getElementById('m4');
    document.getElementById('m4').addClass("selected");
  }
</script>

Answer 1

您可以使用jQuery为您的选择添加事件，例如，如果单击了“anchor”标记。您可以更改颜色以突出显示它们，

<强>的jQuery

$(document).ready(function(){
  $("a").click(function(){
    $("a").addClass("yellow");
  });
});

<强> CSS

.yellow
{
color:yellow;
}

希望这有帮助！

Answer 2

如果您使用的是某些java脚本，则可以在所选的菜单项中添加“active”类，并在CSS中对其进行样式设置。

此外，您应该删除所有其他菜单项的活动课程。

Answer 3

尝试这样做：

$(document).ready(function() {
    $("#cssmenu li").click(function() {
        $(this).addClass('active').siblings('li').removeClass('active');
    });
});

Answer 4

在尝试添加类时，不会读取您的DOM，因此请尝试使用document.ready函数：

jQuery(function( $ ){ // DOM ready

  function makeactive(id) {
    $('#cssmenu li').removeClass('selected');
    $(id).addClass("selected");
  }

  makeactive("#m4"); // use this function call wherever you need

});

Answer 5

工作Jsfiddle：http://jsfiddle.net/YZbU4/

逻辑是：首先从每个li a中删除CSS类，然后将类添加到当前选定的a元素。

$(document).on("click", "#cssmenu li a", function (e) {
    e.preventDefault();
    $('#cssmenu li a').removeClass("active");
    $(this).addClass('active');
});

CSS：，具体取决于您的要求

.active {
    color: #D09d23;
    font-weight: bold;
}

如何在html中突出显示所选菜单项。在这里我创建了单独文件中的菜单列表，并使用javascript将该文件包含在我的html文件中

5 个答案: