jquery实现选项卡切换代码实例

2024-10-31 15:51:44

选项卡在网页中很常见，可以说是必备的一个元素了，网上其实也有很多案例讲解选项卡的做法，各种炫酷。
写这篇文章，就是记录下自己的一个练手Demo了。

两张简陋的图。

主要逻辑就在于找到选项卡和内容框相对应的下标。

<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<style>
.tab{width:400px;height:400px;border:1px solid red;}
.tab-menu{height:100px;width:400px;border:1px solid grey;}
.tab-menu ul{list-style:none;}
.tab-menu li{display:block;width:30%;float:left;border:1px solid blue;}
.tab-box div{width:400px;height:300px;border:1px solid #ff4200;display:none;}
/* 让第一个框显示出来 */
.tab-box div:first-Child{display:block;}
/* 改变选项卡选中时候的样式 */
.change{background:red;}
</style>
<script>
$().ready(function(){
  $(".tab-menu li").mouseover(function(){
  //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
    var _index = $(this).index();
  //让内容框的第 _index 个显示出来，其他的被隐藏
    $(".tab-box>div").eq(_index).show().siblings().hide();
  //改变选中时候的选项框的样式，移除其他几个选项的样式
  $(this).addClass("change").siblings().removeClass("change");
  });
});
</script>
<body>
  <div class="tab">
    <div class="tab-menu">
      <ul>
        <li>新服</li>
        <li>爆服</li>
        <li>大服</li>
      </ul>
    </div>
    <div class="tab-box">
      <div>123</div>
      <div>456</div>
      <div>789</div>
    </div>
  </div>
</body>
</html>

以上所述是小编给大家介绍的jquery实现选项卡切换详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Jquery组件easyUi实现选项卡切换示例

本文实例为大家分享了Jquery easyUi选项卡切换效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" hre
jquery实现tab选项卡切换效果（悬停、下方横线动画位移）

本文实例为大家分享了jquery实现tab选项卡切换展示的具体代码,供大家参考,具体内容如下同时实现悬停.下方横线动画位移: 代码: <sytle> *{margin:0;padding:0; } .box{position:relative;font-size:0;} .box span{display:inline-block;width:150px;height:40px;line-height:40px;text-align:center;background:#eee;font-s
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实现最简单的选项卡切换效果

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

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

抽空把公司项目上用的tab效果封装了一下,实在是需要用的地方太多了~~~ 效果图: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://apps
轻松实现jquery选项卡切换效果

很早之想就学习jquery的插件写法,一直拖到现在,今天趁着没什么工作忙,搜索些资料学习下,写了个比较简单的选项卡效果. 刚开始有看到一个很通俗易通的例子:alert对话框. jquery.alertMsg.js /** * [description] * @param {[type]} $ [description] * @return {[type]} [description] */ (function($){ $.fn.alertMsg = function(options) { var
基于jQuery实现仿百度首页选项卡切换效果

以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧. 先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title&
jquery实现选项卡切换代码实例

选项卡在网页中很常见,可以说是必备的一个元素了,网上其实也有很多案例讲解选项卡的做法,各种炫酷. 写这篇文章,就是记录下自己的一个练手Demo了. 两张简陋的图. 主要逻辑就在于找到选项卡和内容框相对应的下标. <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <script type="text/javascript" src="
jQuery实现选项卡切换图片

本文实例为大家分享了jQuery实现选项卡切换图片的具体代码,供大家参考,具体内容如下效果: 弄出来这个效果,你需要找4张大小相同的图片,大小不一样弄出来效果会很难看代码: <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>使用jQuery实现选项卡切换图片</titl
spring boot多数据源动态切换代码实例

这篇文章主要介绍了spring boot多数据源动态切换代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下当项目中存在多数据源时,就涉及到数据源的动态切换,通过研究,特此记录一下. 1.maven依赖  <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc6</artifactId> &
多种类型jQuery网页验证码插件代码实例

html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,m
jquery实现图片切换代码

本文实例为大家分享了jquery实现图片切换的方法,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js&qu
修改或扩展jQuery原生方法的代码实例

修改或者扩展jQuery的方法代码实例: 毫无疑问,jQuery是一款功能强大且使用方便的类库. 从它的广泛应用可以证实上面的观点,但是正所谓人无完人,金无足赤,jQuery也是如此,并非在任何时候或者场合都能够完美的完成我们的任务,所以有事以后就需要对jQuery原有的方法进行扩展修改,但是最好方法仍然具有原来的功能. 代码实例: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-
JQuery Tab选项卡效果代码改进版

介绍的是基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离.在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. 在这里,我又做了部分的修改,增加了选项卡可自动切换功能,以及选项卡点击相应还是鼠标放上后相应的参数,同时依然支持多次调用. 现在,我把代码贴上,与众博友共享这是js脚本复制代码代码如下: /* jque
CSS标签切换代码实例教程比较漂亮

我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容.与此同时我们发现一些问题,内容的简单排列总使页面很长.滚屏很多才能将显示的内容布局完毕.YAHOO与网易率先应用了标签切换的布局方式,打破了常规布局的局限性,在相同尺寸的区域内,可以放置更多的内容.我们只需要点击不同的选项卡或链接就能展开内容,这并不需要打开新的网页,只是在同一页内完成. 一.标签切换总体的实现思路: 实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用DIV CSS进行布局,首先来整理一下思路,
ionic组件ion-tabs选项卡切换效果实例

介绍 ion-tabs是ionic中的选项卡组件,路由使用的是angular-ui-router.js.因此必须先掌握uiRoute. 效果图实例代码 index.html <body ng-app="starter">  <ion-nav-view></ion-nav-view> </body> tab-index.html <ion-tabs class="

jquery实现选项卡切换代码实例

相关推荐

随机推荐