码上快乐

相关内容   简体   繁体

鼠标tab点击列表切换效果（8种方式）

本文转载自  查看原文  2014-11-20 15:56  3816    Javascript效果实例

第一种方式：切换最简单的方法为：

HTML代码为：

<div class="deanclasstop deanactions fadeInRight">

                    <ul>

                        <li class="on">热门推荐</li>

                        <li>平面设计</li>

                        <li>网页设计</li>

                        <li>室内外设计</li>

                        <li>办公自动化</li>

                        <li>淘宝电商</li>

                        <div class="clear"></div>

                    </ul>

                </div>
<div class="deanclassbottom">
        <ul>
              <li style="display:block"></li>
              <li></li>
              <li></li>
         </ul>
</div>

Js代码为：

jq(".deanclasstop ul li").each(function(s){

                        jq(this).hover(function(){

                            jq(this).addClass("on").siblings().removeClass("on");

                            jq(".deanclassbottom ul li").eq(s).show().siblings().hide();

                            })

                        })

 

第二种方式：

这个效果是一个鼠标悬浮出现列表切换的效果：

HTML结构为：

<div class="activityBox">
        <ul class="activityTab">
              <li style="MARGIN-RIGHT: 3px" id="FlashSale" class="active">折扣专区</li>
              <li style="MARGIN-RIGHT: 3px" id="NewArrivals" class="">团购推荐</li>
          <li id="BeautyTuan" class="">特卖推荐</li>
        </ul>
        <ul style="display: block;" id="FlashSaleCenter" class="activityCenter">
               中间内容区
        </ul>
        <ul id="NewArrivalsCenter" class="activityCenter" style="display: none;">
              中间内容区
        </ul>
        <ul id="BeautyTuanCenter" class="activityCenter" style="display: none;">
              中间内容区
        </ul>
</div>

JS代码为：

$(function(){
   //左右切换效果
   $(".activityTab li").live("hover",function(){
        $(".activityTab li").removeClass("active");
        $(this).addClass("active");
        $(".activityCenter").css("display","none");
        var activityTabID=$(this).attr("id");
        $("#"+activityTabID+"Center").show();
        return false;
    });
});

文件分享下载如下：baiduyunguanjia-javascript实例-20141120-鼠标点击列表切换效果

第三种方式：

这个效果是多个列表都可以切换，这个作为一个页面能多个地方切换的效果；

HTML结构为：

<div class="w iChannel">
        <div class="channel_title">
        <ul id="floorOne" class="channel_t">
                      <li id="fOne_hot" class="r"><span>超值活动</span></li>
              <li id="fOne_man" class=""><strong><a class="track" href="" target="_blank">品牌推荐</a></strong> </li>
              <li id="fOne_woman" class=""><strong><a class="track" href="" target="_blank">热卖单品</a></strong></li>
        </ul>
    </div>
        <div class="channel_main">
                <div style="display: block;" id="fOne_hot_center" class="channel_ad">
                            中间内容区
                </div>
                <div id="fOne_man_center" class="channel_ad" style="display: none;">
                           中间内容区
                </div>
                <div id="fOne_woman_center" class="channel_ad" style="display: none;">
                         中间内容区
                </div>
        </div>
</div>
第二种也是一样的模式，可以在一个页面出现多个切换效果

JS代码为：

$(function(){
      if($("body").attr("class") !="full"){
      
      }else{
      $(".channel_title").each(function(){
          if($(this).find("ul").attr("class") !="channel_t"){
          }else{
             $(this).find("li:eq(0)").mouseover(function(){
                 channeltabHot($(this).attr("ID"),"310px","310px");
                 return false;
             });
             $(this).find("li:gt(0)").mouseover(function(){
                 channelTab($(this).attr("ID"),"310px","310px","310px");
                 return false;
            });
          }
      });
   }
   
});
//首页楼层推荐方法
function channeltabHot(id,fWidth,liWidth){
    $("#"+id).closest(".iChannel").find(".channel_ad").css("display","none");
    $("#"+id+"_center").show();
    $("#"+id).parent().find("li").removeClass();
    $("#"+id).addClass("r");
    $("#"+id).css({width: fWidth});
    $("#"+id).nextAll().css({width: liWidth});
    $("#"+id).closest(".iChannel").attr("id",id+"_box");
    return false;
}
//楼层标签切换方法
function channelTab(id,mWidth,liWidth,fWidth){
    $("#"+id).css({width:mWidth});
    $("#"+id).addClass("on");
    $("#"+id).prevAll().css({width: liWidth}).removeClass();
    $("#"+id).nextAll().css({width: liWidth}).removeClass();
    $("#"+id).parent().find("li:first").css({width:fWidth}).removeClass();
    $("#"+id).closest(".iChannel").find(".channel_ad").css("display","none");
    $("#"+id+"_center").show();
    $("#"+id).closest(".iChannel").attr("id",id+"_box");
    return false;
}

文件分享下载如下：baiduyunguanjia-javascript实例-20141120-鼠标点击列表切换效果

第四种方法：

HTML结构为：

<div class="parter_nav">
          <div class="parter_Tag">
               <span class="active">合作伙伴</span>
               <span>友情链接</span>
          </div>
          <div class="parter_link clearfix">
               <ul style="display:block">
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
                   <li><a href="" rel="nofollow" title="网易体育" target="_blank">网易体育</a></li>
               </ul>
               <ul style="display:none">
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
                   <li><a href="" rel="nofollow" title="乐视体育" target="_blank">乐视体育</a></li>
               </ul>
          </div>
     </div>

JS代码为：

$(function(){
    //合作伙伴切换
    $(".parter_Tag span").each(function(index,elen){
          var chilidList=$(".parter_link").children();
          $(elen).mouseover(function(){
              chilidList.hide();
              $(chilidList[index]).show();
              $(".parter_Tag span").removeClass("active");
              $(this).addClass("active"); 
          });
    });     
});

文件分享下载如下：baiduyunguanjia-javascript实例-20141209-鼠标点击列表切换效果

 针对上面第三个方法的JS代码还可以这样写（这个可以运用到一个页面可以有多个切换效果）：

$(function(){
  TabControl($(".parter_Tag"),$(".parter_link"));
});
function TabControl(nav,content){
    var childNavList=nav.children();
    var childContentList=content.children();
    childNavList.each(function(index,ele){
        //菜单选项单击事件
        $(ele).mouseover(function(){
             childContentList.hide();
             $(childContentList[index]).show();
             childNavList.removeClass("active");
             $(this).addClass("active");
        });
    });
}

 第五种方法：

HTML结构：

<div class="menu_bd">
     <div class="main clearfix">
          <div class="fl logo"><a href="http://localhost/mvc"><img src="http://localhost/static/mvc_static/css/images/logo.png" width="210" height="45"><span class="indexico"></span></a></div>
          <div class="fl menuA">
               <ul>
                   <li class="active"><a href="http://news.usport.cc/" title="" data-menuid="news">资讯</a></li>
                   <li class=""><a href="http://view.usport.cc/" title="" data-menuid="view">观点</a></li>
                   <li class=""><a href="http://special.usport.cc/" title="" data-menuid="special">深度</a></li>
                   <li class=""><a href="http://gossip.usport.cc/" title="" data-menuid="gossip">花边</a></li>
                   <li class=""><a href="http://localhost/mvc/index.php/pic/index" title="" data-menuid="pic">图库</a></li>
                   <li class=""><a href="http://video.usport.cc/" title="" data-menuid="video">视频</a></li>
                   <li class=""><a href="http://twinker.usport.cc/" title="" data-menuid="twinker">推客</a></li>
                   <li class=""><a href="http://ting.usport.cc/" title="" data-menuid="ting">听英超</a></li>
                   <li class=""><a href="http://group.usport.cc/" title="" data-menuid="group">球星社区</a></li>
               </ul>
          </div>
     </div>
     <div class="menuB">
          <ul class="main clearfix" data-id="news">
              <li><a href="" target="_blank" title="">足球1</a></li>
              <li><a href="" target="_blank" title="">蓝球1</a></li>
              <li><a href="" target="_blank" title="">网球1</a></li>
              <li><a href="" target="_blank" title="">综合体育1</a></li>
          </ul>
          <ul class="main clearfix" data-id="view">
              <li><a href="" target="_blank" title="">足球2</a></li>
              <li><a href="" target="_blank" title="">蓝球2</a></li>
              <li><a href="" target="_blank" title="">网球2</a></li>
              <li><a href="" target="_blank" title="">综合体育2</a></li>
          </ul>
          <ul class="main clearfix" data-id="special">
              <li><a href="" target="_blank" title="">足球3</a></li>
              <li><a href="" target="_blank" title="">蓝球3</a></li>
              <li><a href="" target="_blank" title="">网球3</a></li>
              <li><a href="" target="_blank" title="">综合体育3</a></li>
          </ul>
          <ul class="main clearfix active" data-id="gossip">
              <li><a href="" target="_blank" title="">足球4</a></li>
              <li><a href="" target="_blank" title="">蓝球4</a></li>
              <li><a href="" target="_blank" title="">网球4</a></li>
              <li><a href="" target="_blank" title="">综合体育4</a></li>
          </ul>
          <ul class="main clearfix" data-id="pic">
              <li><a href="" target="_blank" title="">足球5</a></li>
              <li><a href="" target="_blank" title="">蓝球5</a></li>
              <li><a href="" target="_blank" title="">网球5</a></li>
              <li><a href="" target="_blank" title="">综合体育5</a></li>
          </ul>
          <ul class="main clearfix" data-id="video">
              <li><a href="" target="_blank" title="">足球6</a></li>
              <li><a href="" target="_blank" title="">蓝球6</a></li>
              <li><a href="" target="_blank" title="">网球6</a></li>
              <li><a href="" target="_blank" title="">综合体育6</a></li>
          </ul>
          <ul class="main clearfix" data-id="twinker">
              <li><a href="" target="_blank" title="">足球7</a></li>
              <li><a href="" target="_blank" title="">蓝球7</a></li>
              <li><a href="" target="_blank" title="">网球7</a></li>
              <li><a href="" target="_blank" title="">综合体育7</a></li>
          </ul>
          <ul class="main clearfix" data-id="ting">
              <li><a href="" target="_blank" title="">足球8</a></li>
              <li><a href="" target="_blank" title="">蓝球8</a></li>
              <li><a href="" target="_blank" title="">网球8</a></li>
              <li><a href="" target="_blank" title="">综合体育8</a></li>
          </ul>
          <ul class="main clearfix" data-id="group">
              <li><a href="" target="_blank" title="">足球9</a></li>
              <li><a href="" target="_blank" title="">蓝球9</a></li>
              <li><a href="" target="_blank" title="">网球9</a></li>
              <li><a href="" target="_blank" title="">综合体育9</a></li>
          </ul>
     </div>
</div>

JS代码为：

$(function(){

   //二级导航切换
    if($('.menu_bd ul').length && $('.menu_bd .menuB ul').length){
       var menuA=$('.menu_bd .menuA');
       var menuB=$('.menu_bd .menuB');
       var menuTimeid='';
       menuA.on('mouseover','li',function(){
           if(menuTimeid){
              clearTimeout(menuTimeid);
           }
           if(!$(this).hasClass('active')){
              $(this).addClass('active').siblings().removeClass('active');
              menuB.find('ul[data-id="'+$(this).children('a').attr('data-menuid')+'"]').addClass('active').siblings().removeClass('active');
           }
       });
    }
    
});

文件分享下载如下：baiduyunguanjia-javascript实例-20141120-鼠标点击列表切换效果

 

第六种方法：

HTML结构为：

<div class="subCategories">
<ul class="subCat2">
    <li data-catid="6"><a target="_blank" href="">衬衫</a></li>
    <li data-catid="18" class=""><a target="_blank" href="">小西装</a></li>
    <li data-catid="26" class=""><a target="_blank" href="">连衣裙</a></li>
    <li data-catid="31" class=""><a target="_blank" href="">裤子</a></li>
    <li data-catid="38" class=""><a target="_blank" href="">针织衫</a></li>
</ul>
<ul class="subCat3">
    <li class="subcat_6">
        <a target="_blank" href="category.php?id=7">无袖</a>
        <a target="_blank" href="category.php?id=8">净色</a>
        <a target="_blank" href="category.php?id=9">休闲</a>
        <a target="_blank" href="category.php?id=10">长袖</a>
        <a target="_blank" href="category.php?id=11">翻领</a>
        <a target="_blank" href="category.php?id=12">蕾丝</a>
        <a target="_blank" href="category.php?id=13">高端</a>
        <a target="_blank" href="category.php?id=14">欧美</a>
        <a target="_blank" href="category.php?id=15">短袖</a>
        <a target="_blank" href="category.php?id=16">雪纺</a>
        <a target="_blank" href="category.php?id=17">优雅</a>
    </li>
    <li class="subcat_18">
        <a target="_blank" href="category.php?id=19">修身款</a>
        <a target="_blank" href="category.php?id=20">韩系</a>
        <a target="_blank" href="category.php?id=21">百搭款</a>
        <a target="_blank" href="category.php?id=22">七分袖</a>
        <a target="_blank" href="category.php?id=23">休闲</a>
        <a target="_blank" href="category.php?id=24">长袖</a>
        <a target="_blank" href="category.php?id=25">优雅</a>
    </li>
    <li class="subcat_26">
        <a target="_blank" href="category.php?id=27">优雅</a>
        <a target="_blank" href="category.php?id=28">修身</a>
        <a target="_blank" href="category.php?id=29">欧美</a>
        <a target="_blank" href="category.php?id=30">休闲</a>
    </li>
    <li class="subcat_31">
        <a target="_blank" href="category.php?id=32">牛仔裤</a>
        <a target="_blank" href="category.php?id=33">分裤</a>
        <a target="_blank" href="category.php?id=34">哈伦裤</a>
        <a target="_blank" href="category.php?id=35">休闲裤</a>
        <a target="_blank" href="category.php?id=36">短裤</a>
        <a target="_blank" href="category.php?id=37">长裤</a>
    </li>
    <li class="subcat_38">
        <a target="_blank" href="category.php?id=39">优雅</a>
        <a target="_blank" href="category.php?id=40">欧美</a>
    </li>
</ul>
</div>

JS代码为：

$(function(){
     // 子分类联动
    $('.subCat2 li').mouseover(function(){
        var catid = $(this).data('catid');
        $('.subCat2 li').removeClass('active');
        $(this).addClass('active');
        $('.subCat3 li').hide();
        $('.subCat3 .subcat_'+catid).show();
    });
    
    $('.subCat2 li:first').addClass('active');第一位添加active显示
  });

文件分享下载如下：baiduyunguanjia-javascript实例-20150130-鼠标点击列表切换效果

 第七种方法：

HTML结构为：

<!--分类目录 start-->
<div class="list">
     <ul>
         <li class="cat-item cat-item-12"><a href="">IOS开发</a></li>
         <li class="cat-item cat-item-2"><a href="">前端开发</a></li>
         <li class="cat-item cat-item-1"><a href="">未分类</a></li>
         <li class="cat-item cat-item-70"><a href="">笑谈JAVA</a></li>
     </ul>
</div>
<div class="weibo-show">
     <!--微博秀 start-->
   <iframe width="100%" height="700" class="share_self"  frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=700&fansRow=2&ptype=1&speed=0&skin=1&isTitle=1&noborder=0&isWeibo=1&isFans=1&uid=2110274250&verifier=1b569534&dpc=1"></iframe>
     <!--微博秀 end-->
</div>
<!--分类目录 end-->
<header class="left">
        <div class="sns-icon">
             <ul>
                <li class="sns-weibo"><span>展开微博窗口</span></li>
                <li class="sns-qq"><span>QQ:327417779</span></li>
                <li class="sns-weichat"><span>微信:mailzwj</span></li>
                <li class="icon-category"><span>展开分类目录</span></li>
             </ul>
        </div>
</header>

JS代码为：

jQuery(function($){
   //展开分类目录
   $(".icon-category").click(function(){
      if($(this).hasClass("list-open")){
         $(this).removeClass("list-open").children("span").html("展开分类目录");
         $(".list").stop().animate({left:110},500);
      }else{
          $(this).addClass("list-open").children("span").html("关闭分类目录");
          if($(".sns-weibo").hasClass("sns-weibo-open")){
             $(".sns-weibo").click();
          }
          $(".list").stop().animate({left:320},500);
      }
   });
   $(".sns-weibo").click(function(){
      if($(this).hasClass("sns-weibo-open")){
          $(this).removeClass("sns-weibo-open").children("span").html("展开微博窗口");
          $(".weibo-show").stop().animate({left:60},500);
      }else{
          $(this).addClass("sns-weibo-open").children("span").html("关闭微博窗口");
          if($(".icon-category").hasClass("list-open")){
             $(".icon-category").click();
          }
          $(".weibo-show").stop().animate({left:320},500);
      }
   });
});

查看效果可点击：http://localhost/response/seejs_index.html

第八种方法：这个方法可以作为插件运用很多个（）

 

HTML结构为：

<div class="match_ch">
     <div class="mconthd">
          <span id="leagrank_lb_1" class="tab_hd_item current" onclick="cg('leagrank',1)">未结束</span>
          <span id="leagrank_lb_2" class="tab_hd_item" onclick="cg('leagrank',2)">已结束</span>
     </div>
     <div class="mcontTab">
           <ul id="leagrank_div_1">
               <li></li>
               ....
           </ul>
           <ul id="leagrank_div_2">
               <li></li>
               ....
           </ul>
     </div>
</div>

JS代码为：

<script>
          function cg(id,m){
             var n=3;
             for(var i=1;i<=3;i++){
             jq("#"+id+"_lb_"+i).removeClass(" current");
             jq("#"+id+"_div_"+i).css("display","none");
             if(m==i){
             jq("#"+id+"_lb_"+i).addClass(" current");
             jq("#"+id+"_div_"+i).css("display","");      
           }
         }
       }
     </script>

 


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 tab切换做hover效果和点击效果 鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果 js点击某分类显示对应内容，即tab切换效果 react中tab切换的几种方式效果 bootstrap tab切换如何让鼠标移动自动切换内容 Android 一个Activity 里面放置多个 Fragment 实现点击切换的Tab 页面效果 用CSS实现Tab页切换效果 JavaScript TAB栏切换效果 tab栏切换的特殊效果 纵向tab标签切换效果
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM