Question

当前链接的css是什么时候有人去关于我们页面然后关于我们颜色变成红色....然后去联系我们页面然后关于我们颜色更改为默认和联系我们颜色更改为红色。 ...

请帮助我成为新设计师......

Answer 1

使用：悬停在css中

在示例中将li替换为您在实际代码中使用的任何元素

例如

li:hover{backgroundcolor:Red;}

li标签，以防您设计菜单

<ul>
   <li> Menu1</li>
   <li> Menu2</li>
</ul>

Answer 2

当您点击特定菜单时，该特定页面将被打开。然后做一件简单的事，

写活动的课程。

将此应用于主页

关于我们页面活动类属性关于我们li

<ul>
   <li class="active">Home</li>
   <li>Projects</li>
   <li>About Us</li>
</ul>

Answer 3

您不能使用JUST CSS来确定您的用户当前所在的页面 - 它不会这样做。您必须调整标记以添加CSS可以使用的某种钩子。像这样 -

<ul id="nav">
   <li><a href="about.html" class="here">About Us</a></li>
   <li><a href="contact.html">Contact</a></li>
</ul>

如果您正在构建静态HTML网站，则可以手动更改每个页面上的HTML以反映菜单中的当前页面。

如果你正在构建更复杂的东西，你可能需要依靠PHP或JavaScript来找出当前页面。这个脚本有点旧（它来自Jeremy Keith的“DOM Scripting”），但它可以完成这项工作：

function highlightPage(id){
    //make sure DOM methods are understood
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;
    if(!document.getElementById(id)) return false;
    var nav = document.getElementById(id);
    var links = nav.getElementsByTagName('a');
    for (var i=0; i < links.length; i++){
        var linkurl = links[i].getAttribute('href');
        var currenturl = window.location.href;
        //indexOf will return -1 on non-matches, so we're checking for a positive match
        if (currenturl.indexOf(linkurl) != -1) {
            links[i].className = "here";
            var linktext = links[i].lastChild.nodeValue.toLowerCase();
            document.body.setAttribute("id",linktext);
        }
    }
}

addLoadEvent(function(){
    highlightPage('nav');
    });

function addLoadEvent(func){
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

此脚本将放在externally linked javascript file。

中

Answer 4

为身体指定身份名称<body id="about-us">。您的链接也需要ID <a href="#" id='this-link">。然后：

#about-us #this-link {
color:red;
}  
#contact-us #this-link {
}

如何将CSS样式赋予当前菜单？

4 个答案: