震惊!jQuery三行代码搞定选项卡
jQuery为JavaScript的框架,提供了很多便捷的方法,可以用更少的代码量实现同样的功能,下面,让我们一起来看成果,以及有哪些知识点~~~
1、li标签设置display:inline-block之后,会产生外边距,并且用F12无法看见,无法调整的问题。
2、链式调用的原理
3、选项卡思路
4、源码
项目效果 1、display:inline-block的间距问题,我们在使用li标签的时候,如果想让他们在一行,可以用浮动,但是更好的,是采用inline-block样式,inline是内联元素,block是块元素,inline-block即为内联块元素,它像内联元素,但具有宽度和高度。img、input标签就是这种内联块元素标签。但是我们使用的时候,会遇到这种问题: QQ图片20180626223042.png QQ图片20180626223122.png
我们看到,中间是有间距的,但是F12调试工具里面,却找不到margin,无论怎么加都没用。其实,这是一个很常见的小坑,在这里,我们有3种解决思路:
第一种:<li></li><li></li><li></li>不换行
第二种:<li><li><li></li>不写结尾标签
但是以上两种都不好,我们遇到问题应该是去解决,而不是逃避,去用其他的,会破坏结构的解法,而且,抱有这种想法,会一直无法进步。
最有效的是第三种:margin-right(或者left,视情况而定):-5px;在这里,给margin加上负值,便可以解决问题啦,加多少取决于具体项目的距离。
于是,我们大概可以知道jQuery的思路是怎样的了:
JavaScript的代码:
var Content= function(){
Content.prototype = {
css:function(){
console.log("执行css()方法");
return this;
},
show:function(){
console.log("执行show()方法");
return this;
},
hide:function(){
console.log("执行hide()方法");
return this;
}
};
var content= new Content();
jQuery的代码:
content.css().show().hide();
于是,套用到本项目中,我们想给点击后的元素添加名字叫做on的样式,这样子写:
$(this).siblings().removeClass('on').eq(index).addClass('on');
//点击的元素的除它之外的同辈元素,删除样式为on,然后eq方法(这里的_index是获取的下标),判断点击的元素,给他加上on这个样式。
大概看看,没什么错误,但是运行却会报错。是什么原因呢?原因就在于方法的返回值,$(this).siblings()用了这个方法之后,返回值就变成了点击者的同辈元素了,后面的方法,是以这个为目标而触发。所以会发生错误。怎么改呢?有两种方法:
$(this).siblings().removeClass('on').end().addClass('on');//用end()返回到最开始的对象,再调用添加样式方法,可行!
$(this).addClass('on').siblings().removeClass('on');//调整一下顺序,先添加类名,然后目标转到了点击者的同辈元素,再删除类名,可行!
3、选项卡原理:选项卡的原理非常简单,当你点击的时候,你点击的元素显示,其余元素隐藏,思路是点击的时候,让所有元素隐藏,在JS里 ,使用for循环。然后再获取点击元素的下标,让点击元素显示。代码如下:
$('#tab-menu>ul>li').click(function() {
var _index = $(this).index();
//点击标题的时候,获取下标存储到一个变量里,根据下标判断要显示的div。
$(this).addClass('on').siblings().removeClass('on');
//获取当前点击的标题,添加on这个样式,让它的同辈元素(除它之外),删除这个样式。
$('#tab-content>div').eq(_index).show().siblings().hide();
//获取要更换的div,用eq()方法判断标题所点击的下标,让它状态变成显示,让其他的兄弟元素变成隐藏。
}
HTML代码:
<div id="main">
<div id="tab-menu">
<ul>
<li class="on">选项卡1切换</li>
<li>选项卡2切换</li>
<li>选项卡3切换</li>
</ul>
</div>
<div id="tab-content">
<div class="show">
我是选项卡1切换</br>
我是选项卡1切换</br>
我是选项卡1切换</br>
我是选项卡1切换</br>
</div>
<div class="hide">
我是选项卡2切换</br>
我是选项卡2切换</br>
我是选项卡2切换</br>
我是选项卡2切换</br>
</div>
<div class="hide">
我是选项卡3切换</br>
我是选项卡3切换</br>
我是选项卡3切换</br>
我是选项卡3切换</br>
</div>
</div>
</div>
CSS代码:
li{
list-style: none;
}
#main{
width:600px;
height:300px;
}
#tab-menu{
width: 600px;
height: 50px;
margin: 0;
}
#tab-menu>ul{
width: 600px;
height: 50px;
padding: 0;
}
#tab-menu>ul>li{
border: 0;
display: inline-block;
padding: 0;
height: 50px;
line-height: 50px;
background-color: #FF9933;
color: #fff;
width: 200px;
text-align: center;
margin: 0 -5px 0 0;
}
.on{
background-color: #FF6600 !important;
}
#tab-content>div{
width:598px;
height:550px;
border: 1px solid #DDDDDD;
margin: 0;
padding: 0;
}
.show{
display: block;;
}
.hide{
display: none;
}
JQ代码(JQ的包自己引入):
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$('#tab-menu>ul>li').click(function() {
var _index = $(this).index();
$(this).addClass('on').siblings().removeClass('on');
$('#tab-content>div').eq(_index).show().siblings().hide();
});
</script>