2022-07-04昨天的一个标题和内容一起切换

2022-07-04

昨天在做后台组的一个小功能的时候遇到的，很基础，但是也很常用，记下来大家一起学习。

比如，需要的是这样子的一个功能，如下图：

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

首先我们先说下标题之间的切换，完了之后再说标题和内容一起切换。。

我给最上面那排的每一个标题统一的类名是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有种逆向的思想呢，不知道描述的够不够准确，但是我是这样子想的呢，比如你想要达到点击当前元素之后，当前元素变成一个特殊的颜色，同级的其他所有元素变成另一种颜色，那么当你添加点击事件之后，一般人想到的是先给当前元素加上你想要的颜色的类名， 然后再去掉同级的元素的类名，可是呢，如果你真的这样子做了的话，是达不到想要的那种效果的！

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