ホームページ >ウェブフロントエンド >htmlチュートリアル >ナビゲーション効果の設定について、同じページに2つのリストがある場合についてアドバイスをお願いします。 _html/css_WEB-ITnose
ナビゲーション効果の設定について、同じページに2つのリストがある場合についてアドバイスをお願いします。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:23:261702ブラウズ
jQuery 导航
一个页面中有两个列表其中一个是设置为导航的（文字为数字的那一串）。
现在希望弄的效果是。作为导航的那个ul里的第一个li初始的背景是黑色，其它的背景是绿色，被点击的li，相关li的背景变为黑色。要求用Jquery实现。现在的问题是，li为黑色背景的效果始终无法加载。
前台页面的代码：
a56165225b53ae2239a99091f5fba8ce
dc6dce4a544fdca2df29d5ac0ea9906b
e2d50363d00dc097532f68a0e04112a8
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6b1936fcce9f92e0a440e29f019bc113a1111115db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6898cb66e5242dd2ef17766352b98bc222222225db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c640bb8f69273a9e6185e367990a806ee33333335db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c68dadfca1c4e471967b8c4aa11019b6fa4444445db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c603180e70ffcfbca96b0349a153a5176e5555555db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c62d5d0bbc7910fa68b4b16511989f5f68AAAAA5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c62d5d0bbc7910fa68b4b16511989f5f68BBBBB5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c62d5d0bbc7910fa68b4b16511989f5f68CCCCC5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c62d5d0bbc7910fa68b4b16511989f5f68DDDDD5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c62d5d0bbc7910fa68b4b16511989f5f68EEEEE5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
f5a47148e367a6035fd7a2faa965022e
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> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。