jQuery制作网页版选项卡

网页选项卡可以较好的利用有限的页面来展示更多的元素，而使用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>

实现的效果如下：

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

赞 (0)

相关推荐

  • jQuery之选项卡的简单实现

    jQuery实现选项卡功能.首先将界面搭建好. 有导航头tab_menu,还有内容tab_box. 要实现的效果就是,点击后,将相应的内容显示出来,其他内容隐藏掉. 同时为了展现选中状态,为选中的项添加背景,以示区别. 这一次,我自己写了代码,先看html部分: 复制代码 代码如下: <div class="tab">    <div class="tab_menu">        <ul>            <li

  • jQuery实现Tab选项卡切换效果简单演示

    jQuery实现Tab选项卡切换效果简单演示

    本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考.具体如下: 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box="#panel-

  • 基于JQuery的6个Tab选项卡插件

    顺便也找 来了不少优秀的Tab选项卡实例,在这里与大家分享一下.当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚 不完善,就不于此共享了.先来看看老外们出色的基于JQuery的各式Tab选项卡吧:1. jQuery 选项卡界面 / 选项卡结构菜单教程这种 类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心此 演示哟,你一定会喜欢上它的.演示 | 下载 | 介绍 2

  • jquery tools之tabs 选项卡/页签

    虽然方便好用,但是个人觉得其在UI方面的表现不是太出彩,今天无意中看到jquery tools--一种基于jquery的UI表现框架,其UI功能展示风格类似(或模仿)flex.该框架提供了tabs(选项卡/页签)overlay(覆盖层),tooltip(提示框),scrollable(滚动信息栏),expose(突出显示),flahembed(视频播放嵌入)六大类功能(其官方网站自称为六大工具),这六大类功能又是每个功能都有自己的独立支持包,不相互干扰,用户完全可以跟据自己需要下载,这样就减少了

  • jquery编写Tab选项卡滚动导航切换特效

    jquery编写Tab选项卡滚动导航切换特效

    本文实例为大家分享jquery编写Tab选项卡切换特效,供大家参考,具体内容如下 效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab. js: $(document).ready(function(){ $('.switch-tab>li').click(function(){ var s=

  • jQuery实现TAB选项卡切换特效简单演示

    jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery tab切换</title> <style type="text/css"> *{ margin:0; pad

  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 复制代码 代码如下: <div id="tt" class="

  • jquery实现具有嵌套功能的选项卡

    关于选项卡功能大家一定都不会陌生,无非就是鼠标点击或者悬浮能够切换相关的内容. 通常情况下,大家见到的选项卡都是没有嵌套功能的,也就是说就是完成了一层切换效果,本章节分享一段代码实例,实现了选项卡的嵌套功能,也就是选项卡中嵌套有选项卡功能,也就能够容纳更多的内容. 代码如下: <head> <meta charset="gb2312"> <title>jquery选项卡</title> <style type="text/

  • 基于jquery实现最简单的选项卡切换效果

    基于jquery实现最简单的选项卡切换效果

    这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类.,比如下面的天猫商城. 下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下. 主要是利用我们在点击相应板块是触发它的单击事件,在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作. 同时利用hover为其添加了鼠标滑过时的效果. 代码: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xh

  • jQuery实现选项卡切换效果简单演示

    jQuery实现选项卡切换效果简单演示

    本文实例讲述了jQuery实现选项卡切换效果简单演示代码.分享给大家供大家参考.具体如下: 运行效果图如下 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡</title> <link type="text/css" rel="stylesheet" href="c

随机推荐