这个功能在现在的网站中使用较为普遍，就是以选项卡的形式来对一些内容做了分类。，比如下面的天猫商城。

下面的源码是仿照天猫写的一个选项卡，实现起来的效果如下。

主要是利用我们在点击相应板块是触发它的单击事件，在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作。

同时利用hover为其添加了鼠标滑过时的效果。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <link href="css/style1.css" rel="stylesheet" type="text/css" />

    <script src="jquery-1.3.2.min.js"></script>

    <title></title>

    <script>

        $(function () {

            var $div_li = $("div.tab_menu ul li");

            $div_li.click(function () {             //定义了tan_menu对应的单击事件，也就是类别的单击事件。

                $(this).addClass("selected")

                .siblings().removeClass("selected");

                var index = $div_li.index(this);

                $("div.tab_box>div").eq(index).show()

                .siblings().hide();

            }).hover(function () {                 //定义了鼠标滑过特效

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

            }, function () {

                $(this).removeClass("hover");

            });

        });

    </script>

</head>

<body>

    <div class="tab">

        <div class="tab_menu">

            <ul>

                <li class="selected">时事</li>

                <li>体育</li>

                <li>娱乐</li>

            </ul>

        </div>

        <div class="tab_box">

            <div>时事</div>

            <div class="hide">体育</div>

            <div class="hide">娱乐</div>

        </div>

    </div>

</body>

</html>

jquery实现网页选项卡的更多相关文章

  1. jquery实现的网页选项卡(拾忆)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JQuery 网页选项卡制作

    网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. 引入所需库 选项卡原理 业务核心 完整小例子 引 ...

  3. Jquery网页选项卡应用

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 8款极具表现力的jQuery/CSS3网页菜单

    上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完美,下面向 ...

  5. Jquery对网页高度、宽度的操作

    Jquery获取网页的宽度.高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: doc ...

  6. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  7. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  8. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  9. jquery封装的选项卡

    ul,li,div{ margin:; padding:;} ul,li{ list-style:none;} .tab_wrap{ width:450px; margin: auto 50px; o ...

随机推荐

  1. window下，加载redis拓展

    下载地址: http://windows.php.net/downloads/pecl/snaps/redis/2.2.5/ 看下自己phpinfo的信息          就选择   ts-x86 ...

  2. schedule() 和 scheduleAtFixedRate() 区别

    1.  schedule() ,2个参数方法:在执行任务时,如果指定的计划执行时间scheduledExecutionTime <= systemCurrentTime,则task会被立即执行. ...

  3. Floyd-Warshall算法

    Floyd也是采用动态规划的方案来解决在一个有向图G=(V,E)上每对顶点间的最短路径问题.运行时间为Θ(V3). 算法分析: 用邻接矩阵map[][]存储有向图,用dist[i][j]表示i到j的最 ...

  4. C#集合--数组

    Array类是所有一维和多维数组的隐式基类,同时也是实现标准集合接口的最基本的类型.Array类实现了类型统一,因此它为所有数组提供了一组通用的方法,不论这些数组元素的类型,这些通用的方法均适用. 正 ...

  5. CentOS下Red5安装

    Red5介绍 Red5是一个采用Java开发开源的Flash流媒体服务器.它支持:把音频(MP3)和视频(FLV)转换成播放流: 录制客户端播放流(只支持FLV):共享对象:现场直播流发布:远程调用. ...

  6. Java8简明教程（转载）

    ImportNew注:有兴趣第一时间学习Java 8的Java开发者,欢迎围观<征集参与Java 8原创系列文章作者>. 以下是<Java 8简明教程>的正文. “Java并没 ...

  7. POJ 1451 T9

    T9 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 3083   Accepted: 1101 Description Ba ...

  8. centos6.5 尝试下用 yum 安装 oddo

    我们要安装PostgreSQL,因为OpenERP使用PostgreSQL作为它的数据库.要安装它,我们需要运行下面的命令. yum install postgresql postgresql-ser ...

  9. Careercup 论坛上较有意思的题目整理

    # 数据结构类 ### 线段树 segment tree http://www.careercup.com/question?id=5165570324430848 找区间内的value的个数 二维线 ...

  10. MyBatis知多少（10）应用程序数据库

    应用程序数据库往往是最小.最简单.也最易于使用的数据库.这种数据库往往是我们这些开发人员通常不介意使用甚至非常乐意使用的.应用程序数据库通常与我们的应用程序处于同一个项目中,两者一齐设计和实现.正是因 ...