layui tab 选项卡

引入css js 和element

默认

• layui-tab 代表一个选项卡
• layui-tab-title 代表选项卡的头
• layui-this 默认选中
• layui-tab-content 选项卡内容包装体
• layui-tab-item 具体卡片的内容
• layui-show 启动选中内容

•   		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    		  <legend>默认风格的Tab</legend>
    		</fieldset>
    		 
    		<div class="layui-tab">
    		  <ul class="layui-tab-title">
    		    <li lay-id="1" class="layui-this" class="we">网站设置</li>
    		    <li lay-id="2" class="we">用户管理</li>
    		    <li lay-id="3" class="we">权限分配</li>
    		    <li lay-id="4" class="we">商品管理</li>
    		    <li lay-id="5" class="we">订单管理</li>
    		  </ul>
    		  <div class="layui-tab-content">
    		    <div class="layui-tab-item layui-show">
    		      1. 高度默认自适应，也可以随意固宽。
    		      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    		    </div>
    		    <div class="layui-tab-item">内容2</div>
    		    <div class="layui-tab-item">内容3</div>
    		    <div class="layui-tab-item">内容4</div>
    		    <div class="layui-tab-item">内容5</div>
    		  </div>
    		</div>
  

动态删除 lay-allowclose="true"属性 是否关闭按钮

<!-- 动态删除 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
	  <legend>动态操作Tab</legend>
	</fieldset>
	 
	<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
	  <ul class="layui-tab-title">
	    <li class="layui-this" lay-id="11">网站设置</li>
	    <li lay-id="22">用户管理</li>
	    <li lay-id="33">权限分配</li>
	    <li lay-id="44">商品管理</li>
	    <li lay-id="55">订单管理</li>
	  </ul>
	  <div class="layui-tab-content">
	    <div class="layui-tab-item layui-show">内容1</div>
	    <div class="layui-tab-item">内容2</div>
	    <div class="layui-tab-item">内容3</div>
	    <div class="layui-tab-item">内容4</div>
	    <div class="layui-tab-item">内容5</div>
	  </div>
	</div> 

过滤方式找id lay-filter="demo" 不是id="demo" 找到元素

• 将demo中动态添加选项卡，删除

• 添加选项卡 你需要有 lay-filter="demo" 定位（添加到哪一个tab中） 在哪里添加

          layui.use(["element","jquery"],function(){
     		var $=layui.jquery;
    		var element=layui.element;
    		// 选项卡中有相关动态操作在右面导航
    		$('#add').click(function(){
    			element.tabAdd('demo', {
    			  title: '选项卡的标题'
    			  ,content: '选项卡的内容' //支持传入html 
    			});
    		})
     	})
  

• 选中哪一个选项卡

       element.tabChange('demo', 'layid');
  

• 0-n index layid 直接而用不可用

          element.tabChange('demo', '1');
  

• 需要搭配；li 中的layui-id="1" 与 element.tabChange('demo', '1');

            layui.use(["element","jquery"],function(){
     		var $=layui.jquery;
    		var element=layui.element;
    		// 选项卡中有相关动态操作在右面导航
    		$('#change').click(function(){
    			 element.tabChange('demo', '1');
    		})
     	})
  

• 删除从一开始

         <script type="text/javascript">
     	layui.use(["element","jquery"],function(){
     		var $=layui.jquery;
    		var element=layui.element;
    		// 选项卡中有相关动态操作在右面导航
    		$('#del').click(function(){
    			// 从1开始
    			element.tabDelete('demo', '3')
    		})
     	})
     </script>
  

• 删除所有 获取所有选型卡

• 增加同一类名，找到属性，循环删除所有

         <script type="text/javascript">
     	layui.use(["element","jquery"],function(){
     		var $=layui.jquery;
    		var element=layui.element;
    		// 选项卡中有相关动态操作在右面导航
    		$('#del_All').click(function(){
    			// 删除所有 获取所有选型卡
    			// 通过属性选择器,循环所有
    			var lis=$(".we") 
    			$.each(lis,function(index,item){
    				//alert(item)//5 dom对象
    				// 获取lay-id
    				var layid=item.getAttribute("lay-id")
    				// alert(layid)    12345
    				// 在用删除方法把layid传入
    				element.tabDelete('demo', layid)
    			})
    		})
    	 
     	})
     </script>