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原型链原理看图说明
Jul 07 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 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
mysql建立外键
2006/11/25 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python flask安装和命令详解
2019/04/02 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
Python与C/C++的相互调用案例
2021/03/04 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
医院我们的节日活动实施方案
2014/08/22 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers