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制作网页版选项卡

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

Javascript 相关文章推荐
JS 进度条效果实现代码整理
May 21 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
js性能优化技巧
Nov 29 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
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
You might like
Protoss兵种介绍
2020/03/14 星际争霸
谈谈PHP语法(2)
2006/10/09 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
用 JSON 处理缓存
2007/04/27 Javascript
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
Python线程的两种编程方式
2015/04/14 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
python模拟实现分发扑克牌
2020/04/22 Python
python如何写出表白程序
2020/06/01 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
Python 读取位于包中的数据文件
2020/08/07 Python
会计与出纳自荐书范文
2014/03/16 职场文书
职务任命书范本
2014/06/05 职场文书
人大调研汇报材料
2014/08/14 职场文书
化验室岗位职责
2015/02/14 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
结婚仪式主持词
2015/06/29 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python