javascript - 如何创建事件菜单

Question

我想知道如何在我的站点上创建事件菜单。我的意思是我当前事件的菜单元素将突出显示。我该怎么做？

我下载了一些模板，它们具有此功能，但它们使用名为“active”的类，但此类会自动出现在当前事件的菜单元素中。他们为此使用任何 javascript 吗？

请帮帮我。

问候，阿卜杜勒

Answer 1

这是一个简单的演示，说明如何使用 jquery 添加“事件”类。希望对您有所帮助。

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