1

我有我的链接导航栏，当用户位于与其中一个链接对应的页面上时，我想更改该链接的背景颜色。例如，当用户在主页上时，我想更改主页链接的背景颜色。我尝试使用 #navbar li a:current 但这不起作用。这可能与 css 一起使用吗？

html:

<div id="navbar">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="samples.html">Samples</a></li>                
            </ul>            
        </div> <!-- end of navbar div -->

CSS：

#navbar li a.current {
background-color: #FFF;}
4

6 回答 6

2

你的 CSS 是错误的。应该是#navbar li a.current { background-color: #FFF;}You 后面有一个冒号a:current。

你的 HTML 应该是这样的：

<div id="navbar"><ul>
                <li class="current"><a href="index.html">Home</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="samples.html">Samples</a></li>                
            </ul>            
        </div> <!-- end of navbar div -->
于 2013-10-11T21:15:02.730 回答
0 
<div id="navbar">
        <ul>
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="samples.html">Samples</a></li>                
        </ul>            
    </div> <!-- end of navbar div -->

现在为“current”类创建背景颜色。您必须将该类与后端逻辑一起应用。CSS 不能自己锻炼逻辑。它只处理样式

于 2013-10-11T21:00:44.137 回答
0

您可以使用 Javascript/JQuery 执行此操作（尽管服务器端方法可能更好）：

var currentPath = window.location.pathname;
var pageName = currentPath.substr(currentPath.lastIndexOf('/')+1); // "index.html", etc
$("a[href=" + pageName + "]").parent().css("background", "#FFF");

以上需要 JQuery，但您可以在纯 Javascript 中执行类似的操作：

var targets = document.querySelectorAll('a[href=' + pageName + ']');
if (targets.length > 0) {
    targets[0].parentNode.style.background = "#FFF";
}

（小提琴）

于 2013-10-11T21:01:29.697 回答
0

你可以像这样使用 javascript(jQuery)：

var currenturl = window.location.pathname.split( '/' );
$('#navbar>li>a[href="'+currenturl[1]+'"]').css({background: 'some_color'})
于 2013-10-11T21:04:39.560 回答
0

当然，使用纯 css3 是可能的。你可以给你所有的 'li' 一个 id。像，li id="sample"

然后将您的锚点修改为 href="index.html#sample"

使用 CSS :target 选择器

li:target{ // 在这里应用你的样式 }

简单的

于 2013-10-11T21:16:20.407 回答
0

如果您只想使用 CSS 完成此操作，也许您可​​以使用父级的 ID：

<div id="parent1">
    <div id="navbar">
        <ul>
            <li class="home"><a href="index.html">Home</a></li>
            <li class="service"><a href="services.html">Services</a></li>
            <li class="about"><a href="about.html">About</a></li>
            <li class="contact"><a href="contact.html">Contact</a></li>
            <li class="sample"><a href="samples.html">Samples</a></li>                
        </ul>            
    </div>
</div>

<div id="parent2">
    <div id="navbar">
        <ul>
            <li class="home"><a href="index.html">Home</a></li>
            <li class="service"><a href="services.html">Services</a></li>
            <li class="about"><a href="about.html">About</a></li>
            <li class="contact"><a href="contact.html">Contact</a></li>
            <li class="sample"><a href="samples.html">Samples</a></li>                
        </ul>            
    </div>
</div>

接着...

#parent1 li.home {
    background: red;
}
#parent2 li.home {
    background: black;
}
于 2013-10-11T21:12:25.493 回答