2

希望你能帮助我..我试图在我当前所在的顶部菜单上保持高亮的 div，就像这个网站上的“问题，标签用户..”一样

这是我的网站：http ://www.ehivemarketing.com/web-design.php

所以基本上顶部菜单是一个包含，其中就是：

<div class="each_circle_menu"><a href="web-design.php" class="topLink"><img src="images/bt_top_webdesign.png"  border="0"/></a></div>
<div class="each_circle_menu"><a href="online-marketing.php" class="topLink"><img src="images/bt_top_online_marketing.png" border="0" /></a></div>
<div class="each_circle_menu"><a href="social-media.php" class="topLink"><img src="images/bt_top_social_media.png"  border="0"/></a></div>
<div class="each_circle_menu"><a href="#" class="topLink"><img src="images/bt_top_learningcentre.png" border="0" /></a></div>
<div class="each_text_menu1"><a href="../index.html" >Home</a></div>
<div class="each_text_menu"><a href="../about-ehive-digital.php" >About Us</a></div>
<div class="each_text_menu"><a href="../contact-us.php" >Contact Us</a></div>
<div class="each_text_menu"><a href="../careers.php" >Careers</a></div>
<div class="each_text_menu">Clients</div>

这是我的悬停CSS：

.each_text_menu1:hover
{
background-color:#aad400;
}
.each_text_menu:hover
{
background-color:#aad400;
}

其中工作正常，但我需要在单击后保留颜色背景。

关于我如何实现这一点的任何想法？

4

6 回答 6

1

这些链接可能对您的工作有所帮助： link1 和 link2

希望这些对您的问题有所帮助。

于 2012-10-29T11:25:34.037 回答
0

使用一个.active类。

.each_text_menu1:hover
{
    background-color:#aad400;
}
.each_text_menu:hover
{
    background-color:#aad400;
}
.active{background-color:#aad400;}

的HTML：

<div class="each_circle_menu"><a href="web-design.php" class="topLink"><img src="images/bt_top_webdesign.png"  border="0"/></a></div>
<div class="each_circle_menu"><a href="online-marketing.php" class="topLink"><img src="images/bt_top_online_marketing.png" border="0" /></a></div>
<div class="each_circle_menu"><a href="social-media.php" class="topLink"><img src="images/bt_top_social_media.png"  border="0"/></a></div>
<div class="each_circle_menu"><a href="#" class="topLink"><img src="images/bt_top_learningcentre.png" border="0" /></a></div>
<div class="each_text_menu1"><a href="../index.html" >Home</a></div>
<div class="each_text_menu"><a href="../about-ehive-digital.php" >About Us</a></div>
<div class="each_text_menu"><a href="../contact-us.php" >Contact Us</a></div>
<div class="each_text_menu"><a href="../careers.php" >Careers</a></div>
<div class="each_text_menu active">Clients</div>
于 2012-11-01T17:27:45.017 回答
0

你可以创建一个类，比方说active，:hover就像这样：

.each_text_menu:hover, .each_text_menu.active {
    background-color:#aad400;
}

而不是检查 PHP - 当您使用 PHP 时 - 选择哪个页面并将活动类添加到导航中的此链接。可能看起来像这样：

<div class="each_text_menu<php print ( 'career' == $page ? ' active' : '' ); ?>">
    <a href="../careers.php" >Careers</a>
</div>
于 2012-10-29T11:14:17.217 回答
0

有很多方法可以做到这一点。一种简单的方法是在每个页面上的 body 标记中添加一个相关的类，然后您可以引用该类。

所以说你的导航是这样的：

<ul id="nav">
 <li id="nav1"><a href="#">Nav #1</a></li>
 <li id="nav2"><a href="#">Nav #2</a></li>
 <li id="nav3"><a href="#">Nav #3</a></li>
 <li id="nav4"><a href="#">Nav #4</a></li>
</ul>

您在主页上的 body 标签将是这样的：

<body class="nav1-on">

所以你的CSS将是：

body.nav1-on ul#nav li#nav1 {
 // some css styles
}
于 2012-10-29T11:14:29.210 回答
0

定义一个附加的 css 类，定义如下：

.active
{
    background-color:#aad400;
}

在生成菜单的代码上，将类添加到相应的 div 中。

于 2012-10-29T11:14:54.937 回答
0

我看到了两种方法来解决这个问题，首先是在 php 中执行逻辑 - 检查您所在的任何页面并回显并将该类添加到正确的项目中。我对 php 有点生疏，所以语法可能有错误

<div class="each_circle_menu <? if($page == 'web-design') { echo "greenBG"; }  ?>">

或者你也可以使用 javascript/jquery 为你做这件事

$(document).ready( function() {
    $('.each_circle_menu').each(function() {
        var item = $(this);
        if(window.location.indexOf(item.attr('href')) != -1) {
            item.addClass('greenBG');
        }
    });
});
于 2012-10-29T11:20:15.210 回答