2

我的母版页中有以下选项卡式导航设置。

        <nav class="grid_12">
            <ul>
                <li><a href="#" class="selected">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

例如，当我单击投资组合选项卡时，我希望投资组合选项卡在我进入投资组合页面时保持突出显示。完成此操作的推荐方法是什么？

我检查了其他一些帖子，但其中最相关的是示例中的 div，而不是单独的页面。

4

1 回答 1

3

假设您拥有的“选定”类名具有您正在谈论的突出显示的样式。在用户单击其中一个链接后，您可以使用 jquery 将“选定”类添加到单击的锚标记。将其放在页面底部的结束正文标记之前或您的主要 JavaScript 文件中。

<script type="text/javascript">
    $(document).ready(function () {
        $(".grid_12 ul li a").click(function() {
            $(".grid_12 ul li a ").removeClass("selected");
            $(this).addClass("selected")
        })
    })
</script>

上面的代码只有在没有页面刷新和只有内容刷新的情况下才有效，但是如果你的页面会刷新并转到一个新页面，我会做这样的事情：

<nav class="grid_12">
    <ul>
        <li><a href="#" class="nav_home">Home</a></li>
        <li><a href="#" class="nav_portfolio">Portfolio</a></li>
        <li><a href="#" class="nav_blog">Blog</a></li>
        <li><a href="#" class="nav_contact">Contact</a></li>
    </ul>
 </nav>

并为特定页面添加样式。例如，当您在 www.mySite.com/portfolio 的 css for 投资组合中时，仅添加：

a.nav_portfolio{
    background-color:orage;
    ...
}

这样，您甚至不必执行任何 javascript。

于 2012-04-23T23:25:18.233 回答