Question

我有链接的导航栏，当用户在与我希望更改该链接的背景颜色的其中一个链接对应的页面上时。例如，当用户在主页上时，我想要更改主页链接的背景颜色。我尝试使用#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;}

Answer 1

你的CSS错了。它应该是#navbar li a.current { background-color: #FFF;} 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 -->

Answer 2

<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 -->

现在为“当前”类创建背景颜色。您必须使用后端逻辑应用该类。 CSS无法自行解决逻辑问题。它只处理样式

Answer 3

你可以使用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";
}

(Fiddle)

Answer 4

你可以像这样使用javascript（jQuery）：

var currenturl = window.location.pathname.split( '/' );
$('#navbar>li>a[href="'+currenturl[1]+'"]').css({background: 'some_color'})

Answer 5

如果您只想使用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;
}

Answer 6

可以使用纯css3来实现。你可以给你所有的'li'一个id。喜欢， li id =“sample”

然后修改您的锚点 a href =“index.html＃sample”

使用CSS：目标选择器

利：目标{ //在这里应用你的风格 }

简单

需要更改当前链接的背景颜色

6 个答案: