如何创建活动菜单

时间:2014-02-14 03:15:29

标签: javascript html css

我想知道如何在我的网站上创建活动菜单。我的意思是我当前活动的菜单元素将突出显示。我怎么能这样做?

我已经下载了一些模板并且他们有这个功能,但是他们使用了一个名为“active”的类,但是这个类自动进入当前活动的菜单元素。他们使用任何javascript吗?

请帮帮我。

此致 阿都

1 个答案:

答案 0 :(得分:1)

这是一个简单的演示,说明如何使用jquery.Hope添加'active'类有用。

//HTML portion

    <ul class="nav">
      <li><a href="#">Link1</a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
      <li><a href="#">Link4</a></li>
    </ul>

//CSS portion    
    <style type="text/css">
    .active
    {
        color:#0CC;
        font-weight:bold;
        text-decoration:none;
    }
    </style>

//JAVASCRIPT portion 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        $("ul.nav li a").click(function() {
            $("ul.nav li a").removeClass("active"); //This is important to make only one link active at a time
            // Try without using above line and note the difference

            $(this).addClass("active"); // Add 'active' class to currently clicked element
        });    
    });
    </script>