Home  >  Article  >  Web Front-end  >  Regarding the setting of the navigation effect, it involves the situation where there are two lists on the same page. Please give me some advice! _html/css_WEB-ITnose

Regarding the setting of the navigation effect, it involves the situation where there are two lists on the same page. Please give me some advice! _html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:23:261659browse

jQuery 导航

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

前台页面的代码:
    

    

   
              
            
            
            

                    
  • AAAAA

  •                 
  • BBBBB

  •                 
  • CCCCC

  •                 
  • DDDDD

  •                 
  • EEEEE

  •             
  

        



CSS code:
.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:Black;
}

JS code:
                                                                                         Add a highlight style to the card
$(".item1").addClass("light1");
$(".item1").click(function(){
$(".item1") //The first a tag Add styles and take out other styles
$(".item1").addClass("light1");
$(".item2,.item3,.item4,.item5").removeClass("light1");
          });                                    $(".item1, .item3,.item4,.item5").removeClass("light1");
                }); ).addClass("light1");
                                                                  ").click(function(){
                                                                                                                                         light1");
                });        $( ".item1,.item2,.item3,.item4").removeClass("light1");
                             ;

Reply to discussion (solution)

.light1
{
background-color:Black !important;;
}

Prioritize light1 Level up a bit~~



Well, one more shot;

Haha~~

That’s awesome Yes, this code is critical. . .

Done, thank you upstairs.

.light1
{
background-color:Black !important;;
}

Increase the priority of light1~~



Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn