Jquery实现tab切换

文章目录

浏览别人博客的时候经常看到侧边栏有tab切换的功能,既能节省侧边栏的空间又能给读者提供更多的浏览链接,对于博客的可读性有着不小的作用。下面讲讲如何用jquery实现tab切换

一般来说,jquery实现功能需要三部分:一是php输出内容,二是css样式表控制样式,三是jquery实现样式表中元素的变化。

php输出内容

读者可以参考如下几篇文章:

分析下热点文章的实现
介绍下最近评论的实现

html结构及css样式表

一般来说html结构为如下形式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="sidebar-tab">
 
    <div id="tab-title">
 
        <h3><span class="selected">最新文章</span><span>热点文章</span><span>随机文章</span></h3>
 
    </div>
 
    <div id="tab-content">
 
        <ul>最新文章php代码</ul>
 
        <ul class="hide">热点文章php代码</ul>
 
        <ul class="hide">随机文章php代码</ul>
 
    </div>
 
</div>

css样式表为:

1
2
3
4
5
6
7
8
9
#sidebar-tab{margin-bottom:1.5em;overflow:hidden;}
 
#tab-title h3{font-size:15px;font-weight:400;}
 
#tab-title .selected{color:#356aa0;border-bottom:0px;} /*标题被选中时的样式*/
 
#tab-title span{padding:5px 5px 5px 5px;border:1px solid #ccf;border-right:0px;margin-left:-1px;cursor:pointer;}
 
#tab-content .hide{display:none;} /*默认让第一块内容显示,其余隐藏*/

jquery代码

1
2
3
4
5
6
7
8
9
$(function(){
$('#tab-title span').mouseover(function(){
 
    $(this).addClass("selected").siblings().removeClass();
 
    $("#tab-content > ul").eq($('#tab-title span').index(this)).show().siblings().hide();
 
});
});

具体效果可以看我的侧边栏,嘿嘿!

参考文章:jQuery之Tab切换代码改进

本文出自 TENNFY博客,转载时请注明出处及相应链接。

本文永久链接: https://www.tennfy.com/349.html

下一篇文章:

上一篇文章:

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

7 + 0 = ?


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

返回顶部