Question

我在header.php中创建了一个菜单，该菜单将包含在每个文件中，例如index.php或contact-us.php。

我现在唯一的问题是将选择添加到菜单中选定的主类别。以下代码基本上可以使用，直到加载所选页面，之后，将删除所选属性。

你能帮我解决这个问题吗？

HTML

<nav id="navigation">
<ul id="navtop">
    <li class=" first has_navchild" id="Home">
        <a href="index.php">Home</a>
        <ul class="submenu">
            <li class=" first has_navchild">
                <a href="index.php">Home</a>
            </li>
            <li class=" last">
                <a href="who-we-are.php">Who we are</a>
            </li>   
        </ul>
    </li>
    <li class=" has_navchild" id="Contacts">
        <a href="contacts.php">Contacts</a>
        <ul class="submenu">
            <li class=" first has_navchild">
                <a href="where.php">Where we are</a>
            </li>
            <li class=" last">
                <a href="form.php">Contact form</a>
            </li>
        </ul>
    </li>
</ul>

的jQuery

$(document).ready(function () {
    $('#navigation ul li').click(function(event){
        event.preventDefault();
        if(($(this).attr("id") === "Home"))
        {
            alert($(this).attr('id')); 
            $("#navigation ul li#Contacts").removeClass("selected");
            $("#navigation ul li#Home").addClass("selected");
        }
        else if($(this).attr("id") === "Contacts")
        {
            alert($(this).attr('id')); 
            $("#navigation ul li#Home").removeClass("selected");
            $("#navigation ul li#Contacts").addClass("selected");
        }
    });    
});

感谢您的帮助

Answer 1

这是正常的，当你使用事件onclick后加载所有文档时你的文档已经加载了，但实际上没有人点击过......所以没有任何附加内容。

首先使用此代码在加载时添加好类：

    $(document).ready(function () {
        if(($(this).attr("id") === "Home"))
        {
            $("#navigation ul li#Home").addClass("selected");
        }
        else if($(this).attr("id") === "Contacts")
        {
            $("#navigation ul li#Contacts").addClass("selected");
        }
    });

在...之后添加点击功能

    $('#navigation ul li').click(function(event){
        event.preventDefault();
        if(($(this).attr("id") === "Home"))
        {
            $("#navigation ul li#Contacts").removeClass("selected");
            $("#navigation ul li#Home").addClass("selected");
        }
        else if($(this).attr("id") === "Contacts")
        {
            $("#navigation ul li#Home").removeClass("selected");
            $("#navigation ul li#Contacts").addClass("selected");
        }
    });

Answer 2

我使用这种方法：

$(window).load(function() {
                  var url = window.location;
                    $('#navtop a').filter(function() {
                        return this.href == url;
                    }).parents("li").addClass('selected');

            });

它检查当前加载的页面并自动将'selected'类添加到其父<li>

共享标题中的菜单上的AddClass（'selected'）

2 个答案: