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

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

主要是利用我们在点击相应板块是触发它的单击事件，在单击事件中再对内容显示框(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. myeclipse9或myeclipse10安装svn的方法

    下载最新的SVN包   site-1.6.5.zip 从中解压出features与plugins文件夹,复制到C:\toBeInstalledSVN 里面,其它的*.xml文件不要 复制下列java代 ...

  2. Raw-OS源代码分析之消息系统-Queue_Size

    分析的内核版本号截止到2014-04-15.基于1.05正式版.blogs会及时跟进最新版本号的内核开发进度,若源代码凝视出现"???"字样,则是未深究理解部分. Raw-OS官方 ...

  3. Android Studio开发入门-引用jar及so文件

    作者:王先荣    最近初学安卓开发,因为以前从未用过JAVA,连基本的语法都要从头开始,所以不太顺利.在尝试使用百度语音识别引擎时遇到了如何引用jar及so文件的问题.在GOOGLE加多次尝试之后, ...

  4. Reflector反编译.NET文件后修复【转】

    反编译后的工程文件用VS2010打开后,在打开窗体时会出现一系列错误提示: 第一种情况: “设计器无法处理第 152 行的代码: base.AutoScaleMode = AutoScaleMode. ...

  5. 康力优蓝机器人 -- 优友U05类人型机器人发布

    [寒武计划]优友U05类人型机器人发布: http://digi.tech.qq.com/a/20151124/043234.htm?pgv_ref=aio2015&ptlang=2052 北 ...

  6. 版本控制与vermagic

    http://hychen.wuweig.org/blog/2009/10/09/rao-guo-linux-driver-vermagicjian-cha/ cd scripts grep 'dir ...

  7. sys.stdout sys.stderr的用法

    stdout:标准输出 stderr:标准错误 print  相当于 sys.stdout.write() + 换行 一个将数据流写入文件的程序,文件名为:main.py def main(out=s ...

  8. POJ 2096 Collecting Bugs

    Collecting Bugs Time Limit: 10000MS   Memory Limit: 64000K Total Submissions: 1716   Accepted: 783 C ...

  9. 科谱,如何单机环境下合理的备份mssql2008数据库

    前言: 终于盼来了公司的自用服务器:1U.至强CPU 1.8G 4核.16G内存.500G硬盘 X 2 (RAID1);装了64位win2008,和64位mssql2008.仔细把玩了一天把新老业务系 ...

  10. XPS 15 9530使用Windows10频繁发生Intel HD Graphics 4600驱动奔溃的一种解决方法

    本人使用XPS 15 9530.集成显卡为Intel HD Graphics 4600.操作系统Windows 10 Pro,使用过程当中经常会发生集成显卡奔溃的问题,错误提示如下: Display ...