ApyCom JavaScript jQuery菜单-如何显示当前选定的导航元素?

ApyCom JavaScript jQuery菜单-如何显示当前选定的导航元素?,javascript,jquery,html,navigation,Javascript,Jquery,Html,Navigation,我正在使用ApyCom的jQuery导航菜单。它工作正常,除了当我点击一个不同的导航元素时,我希望导航元素保持高亮显示,告诉用户他们在哪个页面上。奇怪的是,如果我将href值从实际页面(例如Contact.aspx)替换为#,所选元素将保持高亮显示(当然,我无法导航到Contact.aspx,因为它只有一个#)。只有当我用实际页面替换#时,这种有趣的事情才会发生。以下是Default.aspx页面的屏幕截图: <div id="menu">

我正在使用ApyCom的jQuery导航菜单。它工作正常,除了当我点击一个不同的导航元素时,我希望导航元素保持高亮显示,告诉用户他们在哪个页面上。奇怪的是,如果我将
href
值从实际页面(例如Contact.aspx)替换为
#
,所选元素将保持高亮显示(当然,我无法导航到Contact.aspx,因为它只有一个
#
)。只有当我用实际页面替换
#
时,这种有趣的事情才会发生。以下是Default.aspx页面的屏幕截图:

            <div id="menu">
                <ul class="menu">
                    <li><a href="Default.aspx" class="parent"><span>Home</span></a>
                    </li>
                    <li><a href="#" class="parent"><span>Services</span></a>
                        <div>
                            <ul>
                                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                                    <div>
                                        <ul>
                                            <li><a href="#"><span>Sub Item 1.1</span></a></li>
                                            <li><a href="#"><span>Sub Item 1.2</span></a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
                                    <div>
                                        <ul>
                                            <li><a href="#"><span>Sub Item 2.1</span></a></li>
                                            <li><a href="#"><span>Sub Item 2.2</span></a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li><a href="#"><span>Sub Item 3</span></a></li>
                                <li><a href="#"><span>Sub Item 4</span></a></li>
                                <li><a href="#"><span>Sub Item 5</span></a></li>
                                <li><a href="#"><span>Sub Item 6</span></a></li>
                                <li><a href="#"><span>Sub Item 7</span></a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="About.aspx"><span>About Us</span></a></li>
                    <li class="last"><a href="Contact.aspx"><span>Contact Us</span></a></li>
                </ul>
            </div>

下面是Contact.aspx页面的图片(联系我们):

请注意,“主页”仍然高亮显示。这是Contact.aspx页面的菜单标记:

            <div id="menu">
                <ul class="menu">
                    <li><a href="Default.aspx" class="parent"><span>Home</span></a>
                    </li>
                    <li><a href="#" class="parent"><span>Services</span></a>
                        <div>
                            <ul>
                                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                                    <div>
                                        <ul>
                                            <li><a href="#"><span>Sub Item 1.1</span></a></li>
                                            <li><a href="#"><span>Sub Item 1.2</span></a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
                                    <div>
                                        <ul>
                                            <li><a href="#"><span>Sub Item 2.1</span></a></li>
                                            <li><a href="#"><span>Sub Item 2.2</span></a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li><a href="#"><span>Sub Item 3</span></a></li>
                                <li><a href="#"><span>Sub Item 4</span></a></li>
                                <li><a href="#"><span>Sub Item 5</span></a></li>
                                <li><a href="#"><span>Sub Item 6</span></a></li>
                                <li><a href="#"><span>Sub Item 7</span></a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="About.aspx"><span>About Us</span></a></li>
                    <li class="last"><a href="Contact.aspx"><span>Contact Us</span></a></li>
                </ul>
            </div>

这里有我遗漏的东西吗?

我必须在我的
  • 项目上添加
    class=“current”
    。这就解决了问题。

    中的
    class=“current”
    将不起作用

    您需要将
    class=“current”
    放在
  • 部分,而不是
    class=“active”

    下面是一个例子:

    <li class="active">