Tab组件的html和css技巧
-
html技巧-分成菜单和面板两个部分
1.png
<div class="tab"> /*放在同一个节点里，方便优化元素选择*/
<ul class="tab-menu"> /*菜单*/
<li class="first active">First</li>
<li class="second">Second</li>
<li class="third">Third</li>
</ul>
<div> /*面板*/
<li class="panel">First</li>
<li class="panel">Second</li>
<li class="panel">Third</li>
</div>
</div>
-
css技巧-负margin产生缺口
2.png
/*通过设置负margin和下边框的颜色（白色）产生缺口，具体参数需自己调试*/
margin-bottom: -3px;
border-color: #ccc #ccc #fff #ccc; /*设置边框颜色，顺序为上右下左*/
border: 1px solid transparent; /*设置1px透明边框*/
border-radius: 5px; /*设置边框圆角*/
/*可单独设置边框的四个圆角*/
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
使用JS触发事件
/*语法*/
var event = new Event(' '); /* (' ')可填click，change等 */
要触发事件的元素.dispatchEvent(event);
/*举例*/
var event = new Event('click'); /* click可以改变 */
lis[0].dispatchEvent(event); /*lis[0]表示要触发事件的元素*/
tab.querySelector('.tab-mune li.active').dispatchEvent(event); /*根据选中的元素触发事件：tab.querySelector('.tab-mune li.active')表示选中的元素*/
/*当需要找出Tab组件里里具有active项时，使用for循环语句触发事件*/
for (var i = 0; i < lis.length; i++) {
if (lis[i].classList.contains('active')) {
lis[i].dispatchEvent(event);
break; /*找到active项就跳出循环*/
}
使用函数封装组件-实现3个Tab组件
- Tab组件结构完全相同
/*将tab当作函数的参数，调用相应的Tab*/
var tabs = document.querySelectorAll('.tab'); /*选中页面中的3个Tab*/
initTab(tabs[0]); /*调用第一个Tab*/
initTab(tabs[1]); /*调用第二个Tab*/
initTab(tabs[2]); /*调用第二个Tab*/
function initTab(tab) {
函数体
}
- Tab组件的结构（菜单和面板选择器）不相同
/*将tab,菜单和面板选择器都当作函数的参数，调用相应的Tab，函数体内需要用if语句设置菜单选择器和面板选择器的默认值*/
var tabs = document.querySelectorAll('.tab'); /*选中页面中的3个Tab*/
initTab(tabs[0]); /*调用第一个Tab*/
initTab(tabs[1],'menu li',undefined); /*调用第二个Tab,'menu li'表示第一个Tab菜单不同的选择器，undefined（未定义）表示面板选择器的默认值，菜单选择器对应less代码需修改*/
initTab(tabs[2], undefined, '.pane'); /*调用第三个Tab，undefined（未定义）表示菜单选择器的默认值，'.pane'表示与第一个Tab面板不同的选择器，面板选择器对应less代码需修改*/
function initTab(tab，menuSelector,paneSelector) {
/*if语句设置菜单选择器和面板选择器的默认值*/
if (menuSelector == undefined) {
menuSelector = '.tab-menu li'; /*菜单选择器的默认值为.tab-menu li*/
}
if (paneSelector == undefined) {
paneSelector = '.panel'; /*面板选择器的默认值为.panel*/
}
}
var lis = tab.querySelectorAll(menuSelector);
var panels = tab.querySelectorAll(paneSelector);
......
- 结合逻辑非和能够转换为false的语句精简if语句
逻辑非：！
能够转换为false的语句：
null；
NaN；
0；
空字符串（“”）；
undefined；
if语句设置菜单选择器和面板选择器的默认值可精简为：
if (!menuSelector) {
menuSelector = '.tab-menu li'; /*菜单选择器的默认值为.tab-menu li*/
}
if (!paneSelector) {
paneSelector = '.panel'; /*面板选择器的默认值为.panel*/
}
}
检测内容是否为空
/*当value的值为空时，用alert弹出警告提示*/
var value = Text.value; //<input type="text" value=" " class="text-input">中value的没有默认值有空格的时候什么也不会输出，空格也相当于内容，没有默认值可以不用写value
console.log('hello', value);
if (!value) {
alert('请输入内容！');
return;
}
var value = Text.value.trim();//用 text.value.trim() 去掉空格
逻辑或的使用方法
/*当num的值大于10或等于0时输出ok，否则输出num本身的值*/
if(num > 10 || num == 0) {
console.log('ok');
}
- 短路运算
function a() {
console.log('a');
return 1;
}
function b() {
console.log('b');
return 2;
}
var ret = a() || b();
console.log('result',ret);
/*运算结果为
a
result 1
因为函数a的表达式返回1，即true，不会执行函数b*/
function a() {
console.log('a');
return 0;
}
function b() {
console.log('b');
return 2;
}
var ret = a() || b();
console.log('result',ret);
/*运算结果为
a
b
result 2
因为函数a的表达式返回0，即false，会执行函数b*/
因此，还可以精简if语句
menuSelector = menuSelector || '.tab-menu li';
paneSelector = paneSelector || ".panel";
对象-为了解决函数参数太多不好对应，函数参数最好不超过4个
- 简化函数参数
/*先将可选参数统一命名，然后将数据放到里面，中间用逗号分隔*/
var options = {
menuSelector: false,
paneSelector: '.pane',
autoPlay: true,
};
function initTab(tab, options) {
}
- 使用options对象
initTab(tabs[0]);
initTab(tabs[1], {
menuSelector: '.menu li'
});
var options = {
menuSelector: false,
paneSelector: '.pane',
autoPlay: true,
};
initTab(tabs[2], {
paneSelector: '.pane'
});
function initTab(tab, menuSelector, paneSelector,autoPlay) {
function initTab(tab, options) {
}
