正文
csstabs样式的简单介绍
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何利用ionic框架设置Tabs标签页
第一步，创建静态页面tabs.html，默认是HTML5模板，如下图所示：
第二步，引入ionic相关的CSS文件和JS文件，如下图所示：
第三步，在body插入div和a标签元素，并设置样式，如下图所示：
第四步，预览该静态页面，这时会看到四个Tabs标签，如下图所示：
第五步，再次设置Tabs样式，使每个Tabs样式不一样，如下图所示：
第六步，下面插入AngularJS相关的指令，ng-app、ng-controlle指令，如下图所示：
相关问答
Q1: 如何利用EasyUI框架选项卡Tabs设置和获取标题
第一步，在创建的web项目EasyUI下，新建页面文件夹pages，并在该文件夹下创建页面tabs.html。
第二步，引入EasyUI核心JavaScript和CSS文件，并需要jQuery关键的js文件。
第三步，在body标签元素内插入Tabs标签元素div，并设置样式。
第四步，预览静态页面tabs.html。
第五步，利用tabs标签页自带的函数方法获取选中的tabs页标题。
第六步，再次预览该静态页面，点击其中之一的tabs子标签，这时会弹出标签页标题。
Q2: VUE仿造element-ui el-tabs标签页选项卡样式
因为某个bug 以为 是 el-tabs 组件的问题，所以想直接仿造一个，结果发现 是其他问题，想想下次哪天会用到 就奉上这段样式
这是用VUE写的。看得懂的 用 JQ 写其实逻辑都一样 没区别！
HTML：
div class="tabsMain"
ul class="tabsList"
li :class="activeName==item.code?'active':''" v-for="(item,index) of tabList" :key="index" @click="handleClick(item,index)"{{item.name}}/li
/ul
div v-if="activeName == 'tab-1'"/div //本来想直接用 index 判断的 结果还是直接 仿造el-tabs的方式做吧
div v-if="activeName == 'tab-2'"/div
div v-if="activeName == 'tab-3'"/div
/div
CSS：
.tabsMain{
border: 1px solid #dcdfe6;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
margin: 0;
}
.tabsMain div{
padding: 10px;
}
.tabsList{
width: 100%;
background: #f5f7fa;
overflow: hidden;
}
.tabsList li{
float: left;
padding: 0 20px;
height: 40px;
box-sizing: border-box;
line-height: 40px;
list-style: none;
font-size: 14px;
font-weight: 500;
color: #303133;
transition: all .3s cubic-bezier(.645,.045,.355,1);
border: 1px solid transparent;
margin-bottom: -1px;
cursor: pointer;
}
.tabsList li.active{
color: #409eff;
background-color: #fff;
border-right-color: #dcdfe6;
border-left-color: #dcdfe6;
white-space: nowrap;
position: relative;
transition: transform .3s;
z-index: 2;
}
.tabsList li:first-child{
margin-left: -1px;
}
.tabsList li:last-child{
margin-right: -1px;
}
data(){
return:{
activeName:'tab-1',
tabList:[
{code:'tab-1',name:'标签-1'},
{code:'tab- 2,name:'标签-2'},
{code:'tab-3,name:'标签-3'}
]
}
},
methods:{
handleClick(item){
this.activeName = item.code
}
}
最后结果：图
Q3: html如何动态增加tabs的宽度
html如何动态增加tabs的宽度，操作方法如下。
设备：联想电脑
系统：win8
软件：html+css
1、首先新建一个html文件，命名为test.html，在test.html文件中，使用div标签创建一个模块，并在div添加文字内容，代码如下。
2、在test.html文件中，设置div标签的class属性为erliu。
3、然后在test.html文件内，编写style type="text/css"/style标签，页面的css样式将写在该标签内。
4、接着在css标签内，通过类名erliu来设置div的样式，div的样式将写在花括号中。
5、然后在css标签内，编写div的样式，使用width属性设置div的宽度为200px，使用height属性设置div的高度为100px，使用background属性设置div的背景颜色为红色。
6、最后在浏览器打开test.html文件，查看实现的效果。
