jQuery选项卡的简单实现
jQuery实现了制表符功能。有一头tab_menu导航和内容tab_box。
效果是点击，显示相应的内容，其他内容是隐藏的。
同时，为了显示所选状态，添加所选项的背景以显示差异。
这一次，我写的代码，首先看看HTML部分：
复制代码代码如下所示：
时事
体育
娱乐
时事
体育
娱乐
在HTML中，你需要一个大的DIV DIV与两个子，一头tab_menu导航，一为内容主体tab_box.the CSS代码负责HTML内容布局。
CSS部分：
复制代码代码如下所示：
* {
保证金：0；
填充：0；
}
{。
宽度：240px；
保证金：50px；
/ * *固体边界：1px；
}
tab_menu {。
清楚：两者；
}
tab_menu李{。
浮动：向左；导航左浮动磁头
文本对齐：居中；
列表样式：无；删除标记
背景：# f1f1f1； / /设置默认背景色
边境：1px solid # 898989； / /设置边框的颜色
右边距：4px； / /李之间4px距离
光标：指针；在鼠标浮动后，那里几乎没有符号。
填料：1px 6px； / /李内部控制距离
边界底部：无；
}
。tab_menu悬停{李。
背景：# dfdfdf；
}
。tab_menu李。{ / /选择添加背景和颜色的选择
颜色：# FFF；
背景：# 6d84b4；
}
tab_box {。
清楚：两个；浮动效果清楚的效果
身高：100px； / /设置高度是100px
边境：1px solid # 898989； / /设置边框样式的内容
}
隐藏隐藏需要隐藏的内容div
显示：无；
}
完成布局后，执行jQuery的操作：
复制代码代码如下所示：
$（函数（）{（））
在1中更改CSS属性。命中，删除先前选定的选项，并添加新的选定选项
2。隐藏在div层之前，显示相应的div层
用于导航注册/单击事件
div_li = $（var $ 。tab_menu ul）；
div_li.click美元（函数（）{（）
$（这）。AddClass（选中的），兄弟姐妹（）RemoveClass（选中的）；
/ /无功指数= div_li.index美元（这）；
/ / $（div.tab_box > div）。情商（指数）（，）（兄弟姐妹）（隐藏）；
文本（$）；
如果（文= =当前事务）
{
$（'。tab_box div：包含（时事））。RemoveClass（'hide）。兄弟姐妹（）AddClass（'hide）；
}
如果（文= = 'sports ）
{
$（'。tab_box div：包含（运动））。RemoveClass（'hide）。兄弟姐妹（）AddClass（'hide）；
}
如果（文= = 'entertainment ）
{
$（'。tab_box div：包含（娱乐））。RemoveClass（'hide）。兄弟姐妹（）AddClass（'hide）；
}
}Hover（函数（）{）
$（这）。AddClass（悬停）；
}函数（）{（）
$（这）。RemoveClass（悬停）；
}）；
}）；
这是我写的jQuery代码，我的想法是单击选项卡，添加选中的样式，并删除选定的兄弟会标签样式。
还有一件事，你怎么能触发隐藏在相应的tab_box显示的内容
我发现他们有相应的内容，也就是说，实物期权的相应选项也是实用的东西，而期权则是体育锻炼的相应选择和运动。
我想，首先得到选项头的内容，做出判断，当它针对不同的值时，它触发不同的效果。
效果实现了，但是漏洞很明显，因为并不是所有的标签都对应于标题和内容体。
再看下面的代码：
复制代码代码如下所示：
/ / < { CDATA {！
$（函数（）{（））
div_li = $（var $ div.tab_menu UL Li ）；
div_li.click美元（函数（）{（）
$（这）。AddClass（选择） / /突出显示当前元素
兄弟姐妹（RemoveClass）（选择）； / /删除其他同行元素突出
VaR指标= div_li.index美元（这）； / /指数在李的所有元素获取当前点击的元素。
$（div.tab_box > div） / /子节点的选择。如果你不选择一个子节点，这将产生一个错误。如果在div
EQ（索引）（show）显示元素的对应元素
（兄弟姐妹）（隐藏）；隐藏其他几个对等元素
}）
}）
>
这里的处理特别巧妙，它通过获取李的索引来处理选项。它巧妙地使用了一个隐藏的对应关系，即索引值。
因此，即使选项头与选项的内容不符，它也可以达到同样的效果。
通过这个练习，我认为先思考一下是好的，可以发现思维的差异，发现不足，了解差距，有时甚至你的想法会更好！