碼上歡樂
相關內容    簡體    繁體

鼠標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