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加上负值，便可以解决问题啦，加多少取决于具体项目的距离。
QQ图片20180626225147.png
于是，我们大概可以知道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>
网友评论