网页选项卡可以较好的利用有限的页面来展示更多的元素，而使用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. [Codeforces 864C]Bus

    Description A bus moves along the coordinate line Ox from the point x = 0 to the point x = a. After ...

  2. [HNOI 2002]跳蚤

    Description Z城市居住着很多只跳蚤.在Z城市周六生活频道有一个娱乐节目.一只跳蚤将被请上一个高空钢丝的正中央.钢丝很长,可以看作是无限长.节目主持人会给该跳蚤发一张卡片.卡片上写有N+1个 ...

  3. codeforces 809E Surprise me!

    Tired of boring dates, Leha and Noora decided to play a game. Leha found a tree with n vertices numb ...

  4. [HNOI2004]敲砖块

    题目描述 在一个凹槽中放置了 n 层砖块.最上面的一层有n 块砖,从上到下每层依次减少一块砖.每块砖 都有一个分值,敲掉这块砖就能得到相应的分值,如下图所示. 14 15 4 3 23 33 33 7 ...

  5. [SPOJ962]Intergalactic Map 拆点+最大流

    Jedi knights, Qui-Gon Jinn and his young apprentice Obi-Wan Kenobi, are entrusted by Queen Padmé Ami ...

  6. poj 3525 凸多边形多大内切圆

    Most Distant Point from the Sea Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4758   ...

  7. [bzoj4161]Shlw loves matrix I

    来自FallDream的博客,未经允许,请勿转载,谢谢. 给定数列 {hn}前k项,其后每一项满足 hn = a1*h(n-1) + a2*h(n-2) + ... + ak*h(n-k) 其中 a1 ...

  8. Go实现海量日志收集系统(三)

    再次整理了一下这个日志收集系统的框,如下图 这次要实现的代码的整体逻辑为: 完整代码地址为: https://github.com/pythonsite/logagent etcd介绍 高可用的分布式 ...

  9. Java Web -【分页功能】详解

    分页简介 分页功能在网页中是非常常见的一个功能,其作用也就是将数据分割成多个页面来进行显示. 使用场景: 当取到的数据量达到一定的时候,就需要使用分页来进行数据分割. 当我们不使用分页功能的时候,会面 ...

  10. HybridAPP开发框架Ionic+AngularJS+Cordova搭建

    Ionic Ionic是一个新的.可以使用HTML5构建混合移动应用的用户界面框架,它自称为是"本地与HTML5的结合".该框架提供了很多基本的移动用户界面范例,例如像列表(lis ...