网页选项卡可以较好的利用有限的页面来展示更多的元素，而使用JQuery来制作网页选项卡也是一件非常简单的事情。今天就来分享一个网页选项卡的制作小技巧。

引入所需库

这个知识点很基础，但是为了照顾fresh man ,我还是写一下吧。

细节部分可参照JQuery 如何引入.这篇文章。

选项卡原理

选项卡出现其实只是某一个div获取到了显示的权限，其他的没有显示而已。

  • 网页代码
<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">选项卡1</li>
            <li>选项卡2</li>
            <li>选项卡3</li>
        </ul>
    </div><br><br><br>
    <div class="tab_box">
        <div>选项卡1:这里是1号内容区域</div>
        <div class="hide">选项卡2：这里是2号内容区域</div>
        <div class="hide">选项卡3：这里是3号内容区域</div>
    </div>
</div>
  • 添加点样式元素
<style>

        // 使得UL中的li标签水平排列
        ul {
            display:inline;
            white-space: nowrap;
        }
        li {
            margin:3px;
            float:left;
            background:red;
            // 这样可以防止li标签出现换行的显示
            display:inline-block;
        }

        .tab_menu {
            list-style:none; /* 去掉ul前面的符号 */
            margin: 0px; /* 与外界元素的距离为0 */
            padding: 0px; /* 与内部元素的距离为0 */
            width: auto; /* 宽度根据元素内容调整 */
        }
        .tab_box {
            background-color: #465c71; /* 背景色 */
            border: 1px #4e667d solid; /* 边框 */
            color: #dde4ec; /* 文字颜色 */
            display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */
            line-height: 1.35em; /* 行高 */
            padding: 4px 20px; /* 内部填充的距离 */
            text-decoration: none; /* 不显示超链接下划线 */
            white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
        }
        .selected {
            background-color: green;
            display: block;
        }
        .hide {
            display: none;
        }
    </style>
  • JQuery控制
<script>
    // 加上鼠标的点击效果
    $(function(){
        $("ul li").click(function(){
            $(this).addClass("selected").siblings().removeClass("selected");
            var index = $("ul li").index(this);
            $("div.tab_box > div").eq(index).show().siblings().hide();
        })
    })

    // 加上鼠标悬浮效果
    $(function(){
        $("div.tab_menu ul li").hover(function(){
            $(this).addClass("selected").show();
            // 下面的这个可以实现选项卡的联动效果
            var index = $("ul li").index(this);
            $("div.tab_box > div").eq(index).show().siblings().hide();
        },function(){
            $(this).removeClass("selected").show();
            // 下面的这个可以实现选项卡的联动效果
            var index = $("ul li").index(this);
            $("div.tab_box > div").eq(index).show().siblings().hide();
        })
    })
</script>

业务核心

里面最关键的其实还是最为基础的JQuery选择器的使用，然后我们就可以动态的改变页面上的元素，从而实现我们想要的效果。这也是JQuery的强大之处。

这里比较有技巧性的就是通过对ul li样式的变换，实现了类似于导航栏的效果。我们可以借鉴到今后的开发之中。这是一个非常实用的小技巧。

// 使得UL中的li标签水平排列
        ul {
            display:inline;
            white-space: nowrap;
        }
        li {
            margin:3px;
            float:left;
            background:red;
            display:inline-block;
        }

完整小例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tab Host Demo</title>
    <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
    <style>

        // 使得UL中的li标签水平排列
        ul {
            display:inline;
            white-space: nowrap;
        }
        li {
            margin:3px;
            float:left;
            background:red;
            display:inline-block;
        }

        .tab_menu {
            list-style:none; /* 去掉ul前面的符号 */
            margin: 0px; /* 与外界元素的距离为0 */
            padding: 0px; /* 与内部元素的距离为0 */
            width: auto; /* 宽度根据元素内容调整 */
        }
        .tab_box {
            background-color: #465c71; /* 背景色 */
            border: 1px #4e667d solid; /* 边框 */
            color: #dde4ec; /* 文字颜色 */
            display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */
            line-height: 1.35em; /* 行高 */
            padding: 4px 20px; /* 内部填充的距离 */
            text-decoration: none; /* 不显示超链接下划线 */
            white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
        }
        .selected {
            background-color: green;
            display: block;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">选项卡1</li>
            <li>选项卡2</li>
            <li>选项卡3</li>
        </ul>
    </div><br><br><br>
    <div class="tab_box">
        <div>选项卡1:这里是1号内容区域</div>
        <div class="hide">选项卡2：这里是2号内容区域</div>
        <div class="hide">选项卡3：这里是3号内容区域</div>
    </div>
</div>
<script>
    // 加上鼠标的点击效果
    $(function(){
        $("ul li").click(function(){
            $(this).addClass("selected").siblings().removeClass("selected");
            var index = $("ul li").index(this);
            $("div.tab_box > div").eq(index).show().siblings().hide();
        })
    })

    // 加上鼠标悬浮效果
    $(function(){
        $("div.tab_menu ul li").hover(function(){
            $(this).addClass("selected").show();
            // 下面的这个可以实现选项卡的联动效果
            var index = $("ul li").index(this);
            $("div.tab_box > div").eq(index).show().siblings().hide();
        },function(){
            $(this).removeClass("selected").show();
            // 下面的这个可以实现选项卡的联动效果
            var index = $("ul li").index(this);
            $("div.tab_box > div").eq(index).show().siblings().hide();
        })
    })
</script>
</body>
</html>

实现的效果如下：

JQuery 网页选项卡制作的更多相关文章

  1. Jquery网页选项卡应用

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

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

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

  3. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  4. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  5. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. jQuery手风琴的制作！！

    jQuery手风琴的制作 首先我们先来做一个简单的jQuery的效果图 效果图 如下: css代码 如下: <style type="text/css" media=&quo ...

  7. 40款非常棒的 jQuery 插件和制作教程（系列一）

    jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象.jQuery以其插件众多.独特.轻量以及支持大规模的网站开发闻名 ...

  8. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  9. 利用Jquery和fullCalendar制作日程表

    详情请参考以下代码 <!DOCTYPE html> <html> <head> <title>利用Jquery和fullCalendar制作日程表< ...

随机推荐

  1. [HNOI 2008]越狱

    Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果 相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱 I ...

  2. POJ 1721 CARDS

    Alice and Bob have a set of N cards labelled with numbers 1 ... N (so that no two cards have the sam ...

  3. ●Codevs 4158 残缺的字符串

    题链: http://codevs.cn/problem/4158/ 题解: FFT. 定义两个相同长度的字符串s1,s2的距离为 $$dis(s1,s2)=\sum_{i=0}^{len-1}(s1 ...

  4. 51nod 1682 中位数计数

    1682 中位数计数基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 中位数定义为所有值从小到大排序后排在正中间的那个数,如果值有偶数个,通常取最中间的两个数值的平均 ...

  5. 【BZOJ4653】【Noi2016D2】区间

    原题传送门 Description 在数轴上有 n个闭区间 [l1,r1],[l2,r2],...,[ln,rn].现在要从中选出 m 个区间,使得这 m个区间共同包含至少一个位置.换句话说,就是使得 ...

  6. bzoj 2212: [Poi2011]Tree Rotations

    Description Byteasar the gardener is growing a rare tree called Rotatus Informatikus. It has some in ...

  7. hdu 2825 aC自动机+状压dp

    Wireless Password Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  8. [Russian Code Cup 2017 - Finals [Unofficial Mirror]]简要题解

    来自FallDream的博客,未经允许,请勿转载,谢谢. Div1难度+ACM赛制  和几个大佬组队逛了逛 A.给一个大小为n的集合ai(1<=ai<=1000000),要求你构造一个大小 ...

  9. 使用JAXB解析xml文件(一)

      1.java中解析xml的几种方式 1.1 JDK原生dom形式 原理:一次性把xml读入内存,在内存中构建成树形结构.优点:对节点操作方便,缺点:需要大量的内存空间,浪费资源 1.2 SAX形式 ...

  10. 分区工具PQ

    http://www.disktool.cn/jiaocheng/resize-partition.html