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

次のように定義された追加の css クラスを定義します。

.active
{
    background-color:#aad400;
}

メニューを生成するコードで、クラスを対応する div に追加します。

于 2012-10-29T11:14:54.937 に答える
0

これにアプローチする方法は 2 つあります。1 つ目は、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 に答える
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

これを行うには多くの方法があります。これを行う簡単な方法の 1 つは、関連するクラスを各ページの 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 に答える