js实现点击切换。不跳转

常用脚本 20-11-16 16 0

如何点击切换?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

本文来自:以上内容来自互联网,如有侵权请联系客服

链接网址:http://cd.seowhy.com

分享:

SEO培训,扫码微信了解

评论

免费拨打  187-0592-1889 免费拨打  187-0592-1889
免费拨打:187-0592-1889拨打电话:187-0592-1889
微信二维码 微信二维码
手机二维码 手机二维码
返回顶部 返回顶部
返回顶部返回顶部
cache
Processed in 0.010343 Second.