0

当前链接的 css 是什么，例如当有人转到关于我们页面然后关于我们颜色变为红色....然后转到联系我们页面然后关于我们颜色变为默认值和联系我们颜色变为红色....

请帮助我是新设计师......

4

4 回答 4

0

在 CSS 中使用 :hover

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

例如。

li:hover{backgroundcolor:Red;}

li 标记以防您设计类似的菜单

<ul>
   <li> Menu1</li>
   <li> Menu2</li>
</ul>
于 2012-04-11T12:03:54.193 回答
0

您不能使用 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();
        }
    }
}

该脚本将放入一个外部链接的 javascript 文件中。

于 2012-04-11T12:30:45.173 回答
0

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

为活动写课。

应用这个，主页

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

<ul>
   <li class="active">Home</li>
   <li>Projects</li>
   <li>About Us</li>
</ul>
于 2012-04-11T12:24:32.110 回答
0

给 body 一个 id name <body id="about-us">。您的链接也需要一个 id <a href="#" id='this-link">。然后： 

#about-us #this-link {
color:red;
}  
#contact-us #this-link {
}
于 2012-04-11T12:43:16.420 回答