ナビゲーション効果の設定について、同じページに2つのリストがある場合についてアドバイスをお願いします。 _html/css

ナビゲーション効果の設定について、同じページに2つのリストがある場合についてアドバイスをお願いします。 _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:23:26

オリジナル

1656 人が閲覧しました

jQuery 导航

一个页面中有两个列表
其中一个是设置为导航的（文字为数字的那一串）。
现在希望弄的效果是。作为导航的那个ul里的第一个li初始的背景是黑色，其它的背景是绿色，被点击的li，相关li的背景变为黑色。要求用Jquery实现。现在的问题是，li为黑色背景的效果始终无法加载。

前台页面的代码：

CSS コード:
.navi_pannel ul
幅: 0px;
高さ: 20px; }
.navi_pannel li
{
float: left;
width: 20px;
margin-right: 6px; }
.navi_pannel li
{
位置 : 相対;
幅: 100%;
背景: 緑;
テキスト整列: 中央;
.light1
{
背景色: 黒 ;
}

JS コード:
$(". ).click(function(){
. item4, .Item5 "). RemoveClass (" Light1 ")
}});
$ (".item2 " ).$(".item1,.item3,.item4,.item5").removeClass("light1");
(){
);
$ (" .item5").click(function(){
... light1"); ! important;;
}

light1 の優先順位を少し上げます~~

さて、もう一つ;

はは~~

すごいですね、このコードは重要です。。。

完了しました、2階でありがとう。

.light1
{
background-color:Black !重要;;
}

light1 の優先度を上げます~~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><title>无标题文档</title><style type="text/css">.navi_pannel ul{list-style: none;width: 500px;margin: 0px auto;padding-left: 5px;height: 20px;}.navi_pannel li{float: left;width: 85px;height: 20px;line-height: 20px;margin-right: 6px;}.navi_pannel li a{position: relative;width: 100%;display: block;background: green;text-decoration: none;text-align: center;color: #fff;}.light1{background-color:#000!important;}</style></head><body> <form id="form1" runat="server">    <div>              <div class="navi_pannel">            <ul>                <li><a class="item" href="#" target="_self">111111</a></li>                <li><a class="item" href="#" target="_self">222222</a></li>                <li><a class="item" href="#" target="_self">333333</a></li>                <li><a class="item" href="#" target="_self">444444</a></li>                <li><a class="item" href="#" target="_self">555555</a></li>            </ul>            </div>   	</div></form><script type="text/javascript">jQuery(function($){	$('.item').hover(function(){		$(this).addClass('light1');		},function(){		$(this).removeClass('light1');		}).eq(0).addClass('light1');          });</script></body></html>

ログイン後にコピー