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

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

主要是利用我们在点击相应板块是触发它的单击事件，在单击事件中再对内容显示框(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. MapReduce的一点理解

    对于MapReduce编程,大概率的流程用过的人或多或少都清楚,但是归结到细节上,就有的地方不清楚了,下面根据自己的疑问,加上从网上各处,找到的被人的描述,最自己的疑问做出回答. 1. MapRedu ...

  2. Xiph基金会成员：Timothy B. Terriberry

    Speex,CELT,Opus的发明人之一 还特意写了高中:Thomas Jefferson High School for Science and Technology Shit 一查,全美第一名的 ...

  3. Mysql数据备份与恢复

    REM INIT→既に指定したファイルが有った場合, 上書きする REM NORECOVERY→接続先データベースへの既存の接続を閉じる REM REPLACE→既存のデータベースを上書きする set ...

  4. UML 六种关系

    .继承, 男人 和 人 的关系2.实现, 孕妇 和 生宝宝 的关系3.依赖, 人 和 大米.水4.关联, 男人 和 工作5.聚合, 弱整体和部分, 轮子和车6.组合, 强整体和部分, 眼睛和人 参考: ...

  5. SQL Server Profiler：使用方法和指标说明

    SQL Server Profiler的中文意思是SQL Server事件探查,一个Sql的监视工具,可以具体到每一行Sql语句,每一次操作,和每一次的连接.感觉这个工具的作用还是很大的,给大家分享一 ...

  6. EventBus使用介绍

    EventBus是Android下高效的发布/订阅事件总线机制.作用是可以代替传统的Intent,Handler,Broadcast或接口函数在Fragment,Activity,Service,线程 ...

  7. android手机出现sqlite3 not found的解决方法

    解决方法如下: 1.如果/system目录为不可读写的,需要挂载为读写: C:\Users\easteq>adb shell root@android:/ # mount -o remount, ...

  8. 让我们一起Go（十三）

    前言: 上篇,我们了解了Go语言接口的一些知识,在这篇中,我们将继续聊聊接口这东西. Go语言空接口 Go语言中定义一个空接口,也就是没有任何函数需要实现的接口就是一个空接口,作为一个空接口,因为对象 ...

  9. 轻量级linux CRUX安装笔记

    感谢hrdd的分享,原文出处:http://wxdhrdd.blog.163.com/blog/static/120500564200952592240867/ 以下是对原文进行补充 crux的安装: ...

  10. Java知多少（109）数据库更新

    数据库更新操作包括数据表创建.删除.以及数据表记录的增加.删除.修改等操作.如果利用数据 SQL命令实现,则利用Statement对旬的executeUpdate()方法,执行SQL的update语句 ...