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跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 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的FTP学习(四)
2006/10/09 PHP
为查询结果建立向后/向前按钮
2006/10/09 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python基础教程之Filter使用方法
2017/01/17 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
html5菜单折纸效果
2014/04/22 HTML / CSS
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
周年庆典邀请函范文
2014/01/23 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
办理护照工作证明
2014/10/10 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android