Question

我有点卡住了。我在下面的图片中创建了几乎所有内容。我坚持的是我试图弄清楚如何设置它，以便当用户点击其中一个链接时，它使下面的行变为红色（在下一页加载后）。显然我需要使用Jquery来检测页面然后添加内联css，但我正在努力的是我希望这个尽可能简单，以便我可以将此模板提供给其他人，然后他们可以添加或删除项目必要。我试图弄清楚我是否可以某种方式使用li元素来做到这一点，但我还没有找到方法。有没有人有任何想法可以帮助我？

enter image description here

Answer 1

您可以执行the way jackJoe suggests并在当前所选页面上设置active类服务器端，但您也可以使用纯CSS和一些提前规划来完成此操作。

这包括首先为您网页的id标记设置<body>属性，这无论如何都是一个很好的做法。然后，您的CSS文件将利用该正文id来确定哪个<li>应显示为“有效”。

示例页面代码：

<body id="main"> <!-- change this id for each page -->
    <ul>
        <li class="main-nav"><a href="#">Main</a></li>
        <li class="community-nav"><a href="/community">Community</a></li>
        <li class="search-nav"><a href="/search">Search</a></li>
    </ul>
</body>

示例CSS：

li.main-nav,
li.community-nav,
li.search-nav
{
    background: #FFF;
    /* your other awesome styles */
}

#main li.main-nav,
#community li.community-nav,
#search li.search-nav
{
    /* style the active tab differently */
    background: #F00;
}

这样，导航部分的HTML代码可以在每个页面上保持完全静态。它不必在服务器端呈现或在客户端动态修改。

关于CSS技巧的这项技术有一个很好的写作：ID Your Body For Greater CSS Control and Specificity

Answer 2

这很简单。为“活动”状态创建一个类并设置其样式：

<li class="active">Home</li>

并设置样式（取决于HTML结构，但你明白了）

<强> CSS：

.active {
    border-bottom: 3px red solid;
}

您需要做的就是在页面加载时放置类（例如服务器端）

Answer 3

以HTML格式构建您的菜单：

<body id='Search' >
    <div id='menu'>
        <div class='bars'></div>
        <a href='/home/' title='Home'>Home</a>
        <a href='/community/' title='Community'>Community</a>
        <a href='/search/' title='Search'>Search</a>
        <a href='/contact/' title='Contact'>Contact</a>
        <div class='bars shift'></div>            
    </div>
</body>

请注意，body标签具有特定于页面的ID（如Cody建议的那样）。另请注意，此ID必须与菜单链接的title属性值相同。

然后使用这个CSS：

.bars {border-top:1px solid #CCC;border-bottom:1px solid #CCC;height:5px;}
.shift {margin-top:-6px;}
#menu {font-family:arial;font-size:12pt;text-align:center;}    
#menu a {display:inline-block;padding:7px;text-decoration:none;color:#000;}
.active {border-bottom:5px solid red;}

最后，将此jQuery添加到每个页面：

$(document).ready(function(){
    var id = $('body').attr('id');
    $('#menu a').each(function () {
        var title = $(this).attr('title');
        $(this).removeClass('active');
        if (title == id) $(this).addClass('active');
    });
});

您可以看到实时小提琴演示here。（要测试，只需更改body元素的id并按下run。）

编辑：与Cody Grays方法相比，此方法的好处是，每次在添加，删除或编辑菜单项时更改HTML时，都无需修改css。另一方面，它使用jQuery。但是，如果你想要一个纯css解决方案，只需删除jQuery和body元素的id，而是直接将.active类应用于特定的链接，具体取决于特定的页面（类似于jackJoe的建议）。

如果您必须使用<li>元素，则可以轻松修改此内容。

这个导航可以完全在CSS中完成

3 个答案: