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 相关文章推荐
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
javascript读取本地文件和目录方法详解
Aug 06 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
You might like
PHP概述.
2006/10/09 PHP
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php 数组的指针操作实现代码
2011/02/08 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
python之array赋值技巧分享
2019/11/28 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
维稳承诺书
2015/01/20 职场文书
复兴之路观后感
2015/06/02 职场文书
田径运动会广播稿
2015/08/19 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python
微信小程序实现轮播图指示器
2022/06/25 Javascript
GO中sync包自由控制并发示例详解
2022/08/05 Golang