Layui中的选项卡的使用

水深无声 2022-01-22 03:07 625阅读 0赞

1:在之前已经说了layui中的倒计时的使用，现在再来操作一下layui中的选项卡，当然，这里引用的就不止一个JS插件了，除了“layui.all.js”插件以外，还要用到一个css样式“layui.css”：

2：编辑HTML数据，在最外层放一个div盒子，设置css样式，背景颜色、文字居中、外边距、宽度、高度等，顺便给body也设置一个背景图片；
    Css样式代码：
    .content{
    		background:#FFF;
    		text-align: center;
    		margin:5% auto;
    		width: 60%;
    		height: 500px;
    	}
    
    3：来看一个最简单的选项卡的操作，放一个div，引用layui的类“layui-tab”和“layui-tab-brief”；然后再在div里面放入一个ul，引用layui的类“layui-title”，也就是头部（导航部分）,在ul里面放几个li，除了放入ul以外，还要放一个div，引用layui的类“layui-tab-content”，也就是身体，在div里面再放几个div，都引用“layui-tab-item”，这里代表你具体需要放入内容；
    HTML数据代码：
    <div class="content">
    	<div class="layui-tab layui-tab-brief">
      		<ul class="layui-tab-title">
    			<li class="layui-this">选项卡一</li>
    			<li>选项卡二</li>
    			<li>选项卡三</li>
    			<li>选项卡四</li>
    			<li>选项卡五</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>

4：接下来就能在浏览器里面看到效果了，当点击选项卡一的时候就切换到内容1，点击选项卡二的时候就切换到内容2，以此类推；  
浏览器效果截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]  
上图为切换到选项卡二的效果；  
5:当你可能还需要用到需要带删除的选项卡时，你可以对父层容器设置属性“lay-allowClose=true”，这样就能跟浏览器一样关闭你不需要的选项卡了；如果你觉得默认风格不好看，想换个风格时，你可以尝试一下layui自带的卡片风格，即： layui-tab-card；把它加在父层容器的类里面就OK了，但是它这个类的话里面是自带高度100px的，所以我们需要在给内容区重新设置一下高度，比如给它300px；现在我们在打开浏览器来看看这个选项卡的效果，  
带有删除功能和卡片风格并且切换到选项卡四的截图效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]: /images/20220122/01bfe656e6514b96b206c7d8b3bf526d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]: /images/20220122/97246bccc78c45329d33ddb5d4b477e4.png