网页选项卡可以较好的利用有限的页面来展示更多的元素，而使用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. Maven 项目管理工具基础入门系列（二）

    一.前言 在 Maven 项目管理工具基础知识系列(一) 这篇文章中,我们已经初步了解了 Maven,也知道了使用 Maven 作为项目管理工具的好处,特别是已经知道如何快速通过 Maven 构建 W ...

  2. hdu5631 BestCoder Round #73 (div.2)

    Rikka with Graph  Accepts: 123  Submissions: 525  Time Limit: 2000/1000 MS (Java/Others)  Memory Lim ...

  3. C++ 实参和形参

    形参:在函数没有调用的时候,函数的形参并不占据实际的内存空间,也没有实质的值,--正如字面意思那样,"形式"参数,只是一个"形式. 实参:当函数被调用的时候,系统会为形式 ...

  4. salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型

    看此篇博客前或者后,看一下trailhead可以加深印象以及理解的更好:https://trailhead.salesforce.com/modules/lex_dev_lc_basics 做过cla ...

  5. Go 实现字符串相似度计算函数 Levenshtein 和 SimilarText

    [转]http://www.syyong.com/Go/Go-implements-the-string-similarity-calculation-function-Levenshtein-and ...

  6. Python爬取腾讯新闻首页所有新闻及评论

    前言 这篇博客写的是实现的一个爬取腾讯新闻首页所有的新闻及其所有评论的爬虫.选用Python的Scrapy框架.这篇文章主要讨论使用Chrome浏览器的开发者工具获取新闻及评论的来源地址. Chrom ...

  7. idea和androidstudio的首次git配置一些问题

    网上都有很清楚的步骤 但是 都是教怎么使用 但是对第一次应用idea内部vcs的git 则很少有详细说明 首先要在网上创建个项目 然后本地git clone下来 不建议内部vcs的fetch from ...

  8. Deap Learning (吴恩达)　第一章深度学习概论　学习笔记

    Deap Learning(Ng) 学习笔记 author: 相忠良(Zhong-Liang Xiang) start from: Sep. 8st, 2017 1 深度学习概论 打字太麻烦了,索性在 ...

  9. javascript实现图片的预览

    简单javascript代码 实现上传图片预览 <body> <!-- 设置当有图片准备上传时触发javascript代码--> <input type="fi ...

  10. 使用 Nexus Repository Manager 搭建私有docker仓库

    使用容器安装Nexus3 1.下载nexus3的镜像: docker pull sonatype/nexus3 2.使用镜像启动一个容器: docker run -d --name nexus  -- ...