tab切换

迷南。 2022-06-07 14:20 243阅读 0赞

/*tab切换*/

.tab-common { width: 100%; background-color: #25303c; }
    .tab-common .tab-nav { display: inline-block; }
    .tab-common .tab-nav li { width: 100px; height: 40px; text-align: center; line-height: 40px; float: left; }
    .tab-common .tab-nav li.active, .tab-common .tab-nav li:hover { background-color: #1b6d85; }
    .tab-common .tab-contain { width: 100%; height: 300px; overflow: hidden; position: relative; }
    .tab-common .tab-contain > div { position: absolute; top: 0; left: -100%; width: 100%; height: 300px; }
    .tab-common .tab-contain > div.active { left: 0; }

// table切换

function tabCommen( target ) { 
      var lis = target.find(".tab-nav > li");
      var tabs = target.find(".tab-contain > div");
      for( var i=0; i<lis.length; i++ ){
        $(lis[i]).attr("index",i);
        $(lis[i]).click(function(){ 
          for( var j=0; j<lis.length; j++ ){
            $(lis[j]).removeClass("active");
            $(tabs[j]).css("left","-100%");
          }
          $(this).addClass("active");
          $(tabs[$(this).attr("index")]).css("left","0");
        })
      }
    }

html部分

<div class="tab-common" id="tab-common">
      <ul class="tab-nav clearfix">
        <li class="active">工单定位</li>
        <li>栅格渲染</li>
        <li>邻区信息</li>
      </ul>
      <div class="tab-contain">
        <div class="active">第一块</div>
        <div>第二块</div>
        <div>第三块</div>
      </div>
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关 tab栏切换

tab栏切换 1、jquery方式首先引入 jquery.js 文件 <style type="text/css"> {

分手后的思念是犯贱/ 2022年12月28日 11:08/ 0 赞/ 193 阅读

相关 leaderf的切换tab

fun! Glly() "Gll的异步函数 call feedkeys("\<TAB>") :LeaderfFile call feed

谁践踏了优雅/ 2022年10月06日 06:53/ 0 赞/ 149 阅读

相关 tab 切换样式

![20210722193233170.png][] <ul> <li v-for="(item, index) in titleList0" :

秒速五厘米/ 2022年08月31日 04:42/ 0 赞/ 219 阅读

相关页面单个TAB切换

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/e1f138ce3146437

忘是亡心i/ 2022年08月28日 09:53/ 0 赞/ 170 阅读

相关 tab切换

/tab切换/ .tab-common { width: 100%; background-color: 25303c; } .tab-common .tab

迷南。/ 2022年06月07日 14:20/ 0 赞/ 244 阅读

相关小程序 tab切换

index.wxml <view class="{ {currentTab==1?'active1':''}}" data-current="1" bi

迈不过友情╰/ 2022年06月01日 12:24/ 0 赞/ 255 阅读

相关 vue tab切换

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

忘是亡心i/ 2022年02月21日 05:54/ 0 赞/ 331 阅读

相关 jQuery实现tab切换

$('tab-content li').click(function() { var i = $(this).index();//下标

野性酷女/ 2021年11月05日 06:10/ 0 赞/ 354 阅读

相关小程序——Tab切换

<view class="body"> <view class="nav bc_white"> <view class="{

爱被打了一巴掌/ 2021年09月30日 08:52/ 0 赞/ 360 阅读

相关 tab切换效果

![20210203145157983.gif][] 该dome仅供参考: 免费项目dome包在文章最底部 html <view class="mg_bo

系统管理员/ 2021年07月25日 02:44/ 0 赞/ 512 阅读