网页选项卡可以较好的利用有限的页面来展示更多的元素，而使用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. 机器学习基石：08 Noise and Error

    噪声:误标.对同一数据点的标注不一致.数据点信息不准确...... 噪声是针对整个输入空间的. 存在噪声的情况下,VC bound依旧有用: 存在噪声,就是f------>p(y|x),f是p的 ...

  2. poj 2425 AChessGame(博弈)

    A Chess Game Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 3791   Accepted: 1549 Desc ...

  3. SAM维护的在线LCS

    题目大意: 给定两个字符串,存在三种操作,分别是在a,b串末尾加一个字符串,和询问两串的LCS 题解: Get新套路:把两串建在同一SAM上,将重合的位置合并为同一节点,再加个标记数组,如果两者的LC ...

  4. [bzoj1566][NOI2009]管道取珠

    来自FallDream的博客,未经允许,请勿转载,谢谢. n<=500 神题...... 发现这个平方可以看作两个序列相同的对数  然后就可以表示状态了. f[i][j][k]表示两个序列各选了 ...

  5. [APIO2012]

    来自FallDream的博客,未经允许,请勿转载,谢谢. --------------------------------------------------- A.dispatching 派遣 上次 ...

  6. SpringCloud学习之feign

    一.关于feigin feigin是一种模板化,声明式的http客户端,feign可以通过注解绑定到接口上来简化Http请求访问.当然我们也可以在创建Feign对象时定制自定义解码器(xml或者jso ...

  7. C++ 智能指针 auto_ptr 和 shared_ptr

    首先,如果你不知道什么是智能指针,请先移步:C++智能指针简单剖析 1.auto_ptr #ifndef AUTO_PTR_H #define AUTO_PTR_H template<typen ...

  8. Padding Oracle攻击

    最近在复现LCTF2017的一道题目,里面有一个padding oracle攻击,也算是CBC翻转攻击,这个攻击主要针对CBC加密模式的 网上有关这个攻击的博客文章很多,但是其中有一些细节可能是个人的 ...

  9. 深入以太坊智能合约 ABI

    开发 DApp 时要调用在区块链上的以太坊智能合约,就需要智能合约的 ABI.本文希望更多了解 ABI,如为什么需要 ABI?如何解读 Ethereum 的智能合约 ABI?以及如何取得合约的 ABI ...

  10. JavaScript 题目（作用域）

    var length = 10 function fn(){ alert(this.length) } var obj = { length: 5, method: function(fn) { fn ...