layui tab html layui竖版tab选项卡

效果图：

代码：

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document

.layui-tab-title li{

display: block;

}

.layui-tab-title{

float: left;

width: 200px;

}

.layui-tab-content{

float: left;

width: 500px;

}

简洁风格的Tab

网站设置用户管理权限分配商品管理订单管理内容不一样是要有，因为你可以监听tab事件(阅读下文档就是了)内容2内容3内容4内容5

layui.use('element', function(){

var $ = layui.jquery

,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

//触发事件

var active = {

tabAdd: function(){

//新增一个Tab项

element.tabAdd('demo', {

title: '新选项'+ (Math.random()*1000|0) //用于演示

,content: '内容'+ (Math.random()*1000|0)

,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下

})

}

,tabDelete: function(othis){

//删除指定Tab项

element.tabDelete('demo', '44'); //删除：“商品管理”

othis.addClass('layui-btn-disabled');

}

,tabChange: function(){

//切换到指定Tab项

element.tabChange('demo', '22'); //切换到：用户管理

}

};

$('.site-demo-active').on('click', function(){

var othis = $(this), type = othis.data('type');

active[type] ? active[type].call(this, othis) : '';

});

//Hash地址的定位

var layid = location.hash.replace(/^#test=/, '');

element.tabChange('test', layid);

element.on('tab(test)', function(elem){

location.hash = 'test='+ $(this).attr('lay-id');

});

});