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

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

主要是利用我们在点击相应板块是触发它的单击事件，在单击事件中再对内容显示框(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. Asp.net Core WebApi 支持json/xml格式的数据返回

    Asp.net core 在做webapi项目的时候,默认是只返回json格式的数据的,如果想要开启xml数据返回,需要在startup里配置如下: public void ConfigureServ ...

  2. Crystal Reports 支持的纸张种类

    DefaultPaperSize Paper10x14 254 x 355.6 mm Paper11x17 279.4 x 431.8 mm PaperA3 A3 ?,297 x 420 mm Pap ...

  3. Github上的andoird开源组件整理

    http://blog.csdn.net/findsafety/article/details/50623627 第一部分 个性化控件(View) 主要介绍那些不错个性化的View,包括ListVie ...

  4. Windows Live Writer配置步骤

    推荐文档: [超详细教程]使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结 Live Writer 使用小贴示:发博客时始终使用图片原始 ...

  5. RxJava操作符之Share, Publish, Refcount

    原文链接:http://nerds.weddingpartyapp.com/tech/2015/01/21/rxjava-share-publish-refcount-and-all-that-jaz ...

  6. Unity 由Verlet数值积分产生的头发运动

    先发下效果图. 参考项目unitychan-crs-master与miloyip大神的博客 爱丽丝的发丝,使用Verlet数值积分,根据旧的现在位置与上一桢位置来计算现在的位置,得到新的方向,上面的运 ...

  7. C#调用JAVA接口WSSE方式用WebClient方式

    C#读取JAVA的WSSE接口的调用代码: 用webclient 方式: /// <summary> /// 调用java cxf ws_security加密的服务wcf客户端对应的加密类 ...

  8. mysql int(1) 与 tinyint(1) 有什么区别？

    From: http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/08/25/2153016.html mysql int(1) tinyint ...

  9. using-ef-code-first-with-an-existing-database

    http://weblogs.asp.net/scottgu/using-ef-code-first-with-an-existing-database http://weblogs.asp.net/ ...

  10. UITableViewCell分割线左边部分缺少一些的解决方法

    -(void)viewDidLayoutSubviews {        if ([self.mytableview respondsToSelector:@selector(setSeparato ...