首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery制作网页版选项卡

Posted in Javascript onJuly 28, 2016

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

 ◦引入所需库
 ◦选项卡原理
 ◦业务核心
 ◦完整小例子 

引入所需库

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

选项卡原理

选项卡出现其实只是某一个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制作网页版选项卡

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jQuery制作网页版选项卡

- Author -

Marksinoberg

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript Math.random()随机数函数
Nov 04 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
React如何使用axios请求数据并把数据渲染到组件
Aug 05 Javascript
AngularJS 中的事件详解
Jul 28 #Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 #Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 #Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 #Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 #Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 #Javascript
轮播的简单实现方法
Jul 28 #Javascript
frozenset(1) Mybatis-Plus(3) 并发(8) 字典(3) set(1) el-table(1) 脚手架(2) Next.js(1) pip(1) SingleFlight(2)
You might like
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
AngularJS基础知识
2014/12/21 Javascript
深入理解JavaScript系列（28）：设计模式之工厂模式详解
2015/03/03 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
python Paramiko使用示例
2020/09/21 Python
如何利用Python写个坦克大战
2020/11/18 Python
店长职务说明书
2014/02/04 职场文书
劳模事迹材料范文
2014/12/24 职场文书
教师年度个人总结
2015/02/11 职场文书
小班上学期个人总结
2015/02/12 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL