昨天在做后台组的一个小功能的时候遇到的，很基础，但是也很常用，记下来大家一起学习。
比如，需要的是这样子的一个功能，如下图：
最上面一行的的标题和侧面的标题都是可以互相切换的。这个效果很常见，在浏览网页的时候。
首先我们先说下标题之间的切换，完了之后再说标题和内容一起切换。。
我给最上面那排的每一个标题统一的类名是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 欢迎交流~