如何点击切换?Js实现点击切换

如何点击切换?Js实现点击切换


我这里有一个写法大家可以直接拿过去用


不过css部分需要自己写


点击切换代码,首先需要引入jq


  <!-- two -->    

     

 <div class="ui-news">   

<div class="ui-news-tab">

  

<div class="ui-md  activea "  > 

<a href="JavaScript:;" class="ui-tab " >头条</a>

 </div> 


<div class=" ui-md"> 

  <a href="JavaScript:;" class="ui-tab" >热点</a>

</div> 


<div class="ui-md"> 

 <a href="JavaScript:;" class="ui-tab" >推荐</a>  

</div> 


 </div>    

  

<div class="ui-news-list">  

  

  

 <div class="ui-md-list on">   

       <div class="Push-title"><a href="">新的肥肉公开欸额我饿</a></div>

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>          

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>           

</div>  

 

 <div class="ui-md-list">   

       <div class="Push-title"><a href="">第三个发帖回帖富含天</a></div>

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>          

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>            

</div>  

  

<div class="ui-md-list">   

       <div class="Push-title"><a href="">但是规范化反弹格局更</a></div>

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻4</a></div>          

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>

       <div class="Push-title"><a href="">新闻新闻新闻新闻新闻</a></div>           

</div>  

  

 </div>  

   <script>

 var hd_li = $(".ui-md");

hd_li.click(function () {

    $(this).addClass("activea").siblings().removeClass("activea");

    var index = hd_li.index(this);

    $(".ui-md-list").eq(index).addClass("on").siblings().removeClass("on");

});  

  </script>

 </div>      

     

<!-- two -->     


image


点击就可以切换,我这个就是用在手机端的。

微信扫码咨询
建站咨询
cache
Processed in 0.007035 Second.