网页选项卡可以较好的利用有限的页面来展示更多的元素，而使用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. [ZJOI2011]看电影(MOVIE)

    题目描述 到了难得的假期,小白班上组织大家去看电影.但由于假期里看电影的人太多,很难做到让全班看上同一场电影,最后大家在一个偏僻的小胡同里找到了一家电影院.但这家电影院分配座位的方式很特殊,具体方式如 ...

  2. HNOI2018 滚粗记

    day0 说好了不复习,于是复习了一下配置,没想到一下就记住了,咋不退役去搞英语竞赛捏 皇室一波攒RP,chicken chicken一波攒RP day1 机子坏了,换到了最后面,但这个时候已经 \( ...

  3. 【USACO11NOV】牛的阵容Cow Lineup 尺取法+哈希

    题目描述 Farmer John has hired a professional photographer to take a picture of some of his cows. Since ...

  4. [BZOJ]1071 组队(SCOI2007)

    一道比较NB的套路题. Description NBA每年都有球员选秀环节.通常用速度和身高两项数据来衡量一个篮球运动员的基本素质.假如一支球队里速度最慢的球员速度为minV,身高最矮的球员高度为mi ...

  5. Android Studio创建/打开项目时一直处于Building“project name”Gradle project info的解决办法

    重新安装了Android studio 之后, 启动android studio,打开原来的项目,界面一直停留在: 一直停留在此界面的原因是:Android studio 在下载 Gradle ,但是 ...

  6. Python3 运算符

    装载自:https://www.cnblogs.com/cisum/p/8064222.html Python3 运算符 什么是运算符? 本章节主要说明Python的运算符.举个简单的例子 4 +5 ...

  7. JS 实现点击页面任意位置隐藏div、span

    通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...

  8. DDD实战进阶第一波(七)：开发一般业务的大健康行业直销系统（实现产品上下文接口与测试）

    前一篇文章我们介绍了如何将创建产品的领域逻辑与产品的持久化仓储通过上架产品的用例组织起来,完成了一个功能.在实际的项目中,多种前端的形态比如PC Web. 微信小程序.原生APP等要调用后端的功能,通 ...

  9. Golang学习笔记：channel

    channel channel是goroutine之间的通信机制,它可以让一个goroutine通过它给另一个goroutine发送数据,每个channel在创建的时候必须指定一个类型,指定的类型是任 ...

  10. CI下载与安装_基础配置_MVC

    CI:CodeIgniter -- 由Ellislab公司的CEORickEllis开发,是一个简单快速的PHP MVC框架. =============下载和安装================地址 ...