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   欢迎交流~

转载于:https://www.cnblogs.com/hr2014/p/4236251.html