3

このカスタム css メニューを作成しましたが、タブを切り替えると、実際のページではなく、メニューの「ホーム」リンクに「アクティブ」タブのデザインが残ります。これを修正する方法はありますか？

HTML : 

<ul class="menu">
    <li><a href="http://caribbeantl.com/"; class="active"><span>Home</span></a></li>
    <li><a href="http://caribbeantl.com/hotels/"><span>Testing post</span></a></li>
</ul>

CSS : 

.menu {margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') repeat-x;}
.menu li {padding:0; margin:0; list-style:none; display:inline;}
.menu li a {float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 0px -30px no-repeat;}
.menu li a span {line-height:30px; float:left; display:block; padding-right:15px; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 100% -30px no-repeat;}
.menu li a:hover {background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span {background-position:100% -60px;}
.menu li a.active,
.menu li a.active:hover {line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span,
.menu li a.active:hover span {background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 100% -90px no-repeat;}
4

4 に答える 4

3

HTML:

<div class="menu">
<ul>
  <li><a class="menuLink active" href="#">Home</a></li>
  <li> <a class="menuLink" href="#">Page1</a></li>
  <li><a class="menuLink" href="#">Page2</a></li>
  <li><a class="menuLink" href="#">Page3</a></li>
</ul>
</div>

CSS:

.menu
{
height:64px;
width:100%;
background-repeat:repeat-x;
text-align:center;
 }

.menuLink, .menuLink:visited
{
 color:#00000;
background-image:url(img/btk.png);
text-decoration:none;
font-size: 20px;
width:70px;
height: 50px;
padding: 10px;
display:block;
margin-left: 10px;
margin-right: 10px;
margin-top: 6px;
}
.menuLink:hover
{
color:#CC7011;
background-color:aqua;
font-size: 26px;
}
.active{
background-color:aqua;
}
ul,li{
display:inline-block;
list-style:none;
line-height:60px;
vertical-align:bottom;
}

jquery:

$('.menuLink').click(function(){
  $('a').removeClass('active');
  $(this).addClass('active');
});​

ライブデモ http://jsfiddle.net/PYW35/

于 2012-09-22T10:42:14.783 に答える
1

まず、最初に不要なセミコロンがあります<li>

をアクティブにしたい に移動class="active"する必要があります。<li>

于 2012-09-22T04:29:39.773 に答える
0

正確な答えはわかりませんが、URLを取得するものを見つけて、それがバーのリンクと一致する場合はクラスがアクティブになり、そうでない場合はアクティブになりません。

于 2012-09-22T03:33:26.010 に答える
0

それを行うにはJavaScriptが必要だと思いますが、

これが簡単なデモです。

お役に立てれば

注：getElementsByClassName()一部のブラウザではサポートされていません

次の比較表を見てください

于 2012-09-22T05:57:12.473 に答える