jquery中常见的标题内容之间的切换

昨天在作后台组的一个小功能的时候遇到的，很基础，可是也很经常使用，记下来你们一块儿学习。

好比，须要的是这样子的一个功能，以下图：

最上面一行的的标题和侧面的标题都是能够互相切换的。这个效果很常见，在浏览网页的时候。

首先咱们先说下标题之间的切换，完了以后再说标题和内容一块儿切换。。

我给最上面那排的每个标题统一的类名是top,而后将点击事后呈现的样式写在了.hover里面。

用jquery操做：

$('.top').click(function(){

　　$('.top').removeClass('hover');

　　$(this).addClass('hover');

})

就这样子就OK啦~你能够切换啦！

下面说说标题的内容之间的切换，这是有不少种方法能够实现的，不过对于钟爱jquery的我来讲，仍是用它实现啦~

首先在结构中给标题和内容加上相应的属性~好比我给上面的每个top标题加上了tab,这样子12345依次排开~

而后给相对应的内容加上相对应的属性，好比rel,或者你喜欢其余的均可以~you choose ！you like！

不过有点我仍是须要强调下哈！标题对应的内容属性值最好是写成同样的哈~

为了方便你们看明白，我介绍下个人结构，我上面的每一个标题class="top"，而后我给它们依次加了tab="1"  tab="2"  tab="3"...

内容我所有都是class="con"，而后我给它们加了rel,依次固然就是rel="1"  rel="2"  rel="3"....

多的不说，直接上代码：

注释下方便理解哈~

算了，代码贴出来算了：

$('.hr_right').delegate('.top','click',function(){          //绑定事件
　　var own_tab = $(this).attr('tab');                      //获取标题的tab属性值
　　select(own_tab);　　　　　　　　　　　　　　　　//执行select函数
});
function select(own_tab){　　　　　　　　　　　　　//将上面获取的属性值看成参数传进来
　　var tab = own_tab;　　　　　　　　　　　　　　　　
　　$('.con').hide();　　　　　　　　　　　　　　　　//将全部的内容区域隐藏起来
　　$('.con[rel='+tab+']').show();　　　　　　　　  //让rel的值和tab的值相等的con显示出来

}

好啦~这样就大功告成啦~！

发现一个问题了木有~jquery有种逆向的思想呢，不知道描述的够不够准确，可是我是这样子想的呢，好比你想要达到点击当前元素以后，当前元素变成一个特殊的颜色，同级的其余全部元素变成另外一种颜色，那么当你添加点击事件以后，通常人想到的是先给当前元素加上你想要的颜色的类名， 而后再去掉同级的元素的类名，但是呢，若是你真的这样子作了的话，是达不到想要的那种效果的！

正确的思路是：先去掉全部元素以后要显示的那个样式的类名，而后在给当前点击的元素添加要显示的样式的类名！标题和对应的内容显示也是同样的道理，先将全部的内容隐藏，而后再显示相对的内容~

QQ：503147874   欢迎交流~