javascript - 菜单颜色和菜单问题

Question

所以我有两个问题。一个是，当我在“主页”时，我可能会将鼠标悬停在“关于”上，这会显示“关于”它应该是白色，但“主页”会返回默认的灰色，这是不应该的。我希望我悬停的菜单项是白色文本，周围有一个灰色框，而我当前所在的页面(主页)仅在文本中以白色亮起，周围没有框。此外，当我将鼠标移开(不将鼠标悬停在任何菜单项上)时，白色会停留在我最后悬停的任何元素上。我希望我所在的当前页面(主页)上的文本为白色。

我注意到的另一个问题是，当我移至“关于”选项卡时，“尺寸”(填充？)与“主页”和“关于”按钮与在“主页”选项卡上时不同。既然它在 css 文件中，它应该适用于所有页面，对吧？

我正在为我的网页设计类(class)制作一个网站，我对此还很陌生，但几乎没有复制粘贴就成功地重新创建了兰博基尼网站。你会看到我对菜单系统的意思，我希望它看起来一样(将鼠标悬停在菜单项上会使字体变成白色，周围有一个灰色框，而当前菜单项的颜色(文本)保持白色，没有盒子)。基本上与 Lamborghini 主页上的下拉菜单类型相同(在菜单项上，子菜单会像那样下拉)。

代码(菜单) CSS:

#dolphincontainer{
    position:relative; 
    color:#E0E0E0;
    background:#000000;
    padding-top:40px;
    width:100%;
    font-family:Helvetica,Arial,Verdana,sans-serif;
}
#dolphinnav {
    position:relative;
    font-size:16px;
    text-transform:uppercase;
    font-weight:bold;
    background:#000000 url(images/dolphin_bg.gif) repeat-x bottom left;
    padding:0 0 0 60px;
}
#dolphinnav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    float:left;
}
#dolphinnav ul li {
    display:block;
    float:left;
    margin:0 1px;
}
#dolphinnav ul li a{
    display:block;
    float:left;
    color:#3D3D3D;
    text-decoration:none;
    padding:0 10 0 20px;
    height:10px;
}
#dolphinnav ul li a span {
    padding:12px 20px 0 0;
    height:21px;
    float:left;
}
#dolphinnav ul li a:hover {
    background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;
}
#dolphinnav ul li a:hover span {
    display:block;
    width:auto;
    cursor:pointer;
}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{
    color:#fff;
    background:#000000 url(images/dolphin_left-ON.gif) no-repeat top left;
    line-height:275%;
}
#dolphinnav ul li a.current span {
    display:block;
    padding:0 20px 0 0;width:auto;
    background:#000000 url(images/dolphin_right-ON.gif) no-repeat top right;
    height:33px;
}
#dolphin_inner{
    color: white; 
    padding: 5px; 
    font-size: 80%; 
    height: 1em
}

#dolphin_inner a:link, 
#dolphin_inner a:visited, 
#dolphin_inner a:active{color: white}
#dolphin_inner a:hover{color: yellow}
body {background-color:#000000;} 
.innercontent{display: none;}

代码(菜单)HTML:

<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="about.html"><span>About</span></a></li>
</ul>
</div>
<div id="dolphin_inner">
<div id="about" class="innercontent">   
</div>
</div>
</div>

<script type="text/javascript">

//dolphintabs.init("ID_OF_TAB_MENU_ITSELF", SELECTED_INDEX)
dolphintabs.init("dolphinnav", 0)

</script>

Answer 1

这很容易做到。 JSfiddle HERE 菜单看起来像这样。

<div> <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Heritage</a></li>
    <li><a href="#">Models</a></li>
    <li><a href="#">Dealers</a></li>
    <li><a href="#">Experience</a></li>
    <li><a href="#">Store</a></li> </ul>​ </div>

像这样的CSS。

body{
    background: black;
}
li{

    float: left;
    margin-right: 10px;
}
a{
    color: gray;
    text-decoration: none;
    padding: 5px 10px;
}
a:hover{
    color: white;
    background: gray;
}
a.active{
    color: white;
}
.hover{
    color: white;
}

JQuery 是这样的

$(function(){
    $('a').hover(function(){
        $('a').removeClass('hover');
        $(this).addClass('hover');
    });
});​
​

我所做的是，当前页面有一个类“active”。当它具有“事件”类时，我将其 CSS 颜色设置为白色。使用其他一些 Jquery 代码，您可以检测到您所在的页面。我没有把它包括在这里......如果你真的想要它，也许以后再说。但最主要的是你可以给 "<a href='#'>"当它在该页面上时是一个“事件”类。

好的，接下来...

对于 JQuery，我使用了“悬停”。如果您将鼠标悬停在链接上或在本例中为导航项，我将其命名为“悬停”类。如果您查看 css“.hover”，它具有“颜色:白色；”。如果您将鼠标悬停在某个元素上，它会删除类“悬停”，但我现在悬停在该元素上，我给它一个类“悬停”。

希望对您有所帮助。