一个简单的tab切换代码；

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>tab切换</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  7. </head>
  8.  
  9. <body>
  10. <style type="text/css">
  11. #nav_list{height:25px; width:300px;}
  12. #nav_list div{ float:left; width:100px; line-height:25px; background:#666; text-align:center;}
  13. #nav_list div.cur{ background:#C63; color:#fff;}
  14. #nav_con{ width:298px; height:200px; border:solid 1px #999;}
  15. #nav_con div{ display:none;}
  16. </style>
  17. <div id="nav_list">
  18.     <div class="cur">nav1</div>
  19.     <div>nav2</div>
  20.     <div>nav3</div>
  21. </div>
  22. <div id="nav_con">
  23.     <div style="display:block">tab1tab1tab1tab1tab1tab1tab1</div>
  24.     <div>tab2tab2tab2tab2tab2tab2tab2</div>
  25.     <div>tab3tab3tab3tab3tab3tab3tab3</div>
  26. </div>
  27. <script type="text/javascript">
  28. $("#nav_list div").hover(function(){//如果想点击再切换的话把hover改成click
  29.         $(this).addClass('cur').siblings().removeClass('cur');//鼠标滑过时给当前的div添加class
  30.         var $index = $("#nav_list div").index(this);//获取当前的索引值
  31.         $("#nav_con div").eq($index).show().siblings().hide();//tab内容等于当前鼠标滑过的索引值时，显示对应的内容
  32.         return true;
  33.     },function(){
  34.         return false;//鼠标离开执行的操作，返回一个flase
  35.         });
  36. </script>
  37. </body>
  38. </html>

javascript学习教程之---如何从一个tab切换到banner幻灯片的转换的更多相关文章

  1. javascript学习教程之---如何从一个tab切换到banner幻灯片的转换2

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. javascript学习教程

    我来班门弄斧一下吧,把我JavaScript学习过程中常去的一些网站分享给大家: =========================增加================================ ...

  3. 小程序的一个tab切换

    <view class="tab-left" bindtap="tab"> <view class="{{tabArr.curHdI ...

  4. Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素，如果没有匹配的元素则返回null。

    文章简介:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null. querySelector()方法接受一个CSS查询并返回匹配模式的第 ...

  5. js面向对象学习笔记（五）：tab切换

    重点是this指向问题 <style> .hide{display: none;} #box div,#box1 div{display: none;} .hover{background ...

  6. sweiper做一个tab切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 自己定义一个tab指令

    定义一个tab切换的指令: 指令的文件结构: Js/directives/tab tab.html tab.js tab.html: <style> .my-li-style{ line- ...

  8. Js 实现tab切换效果

    今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的

  9. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

随机推荐

  1. 避免Block的循环引用

    避免Block的循环引用 什么是循环引用,什么时候发生循环引用 1 循环引用就是当self 拥有一个block的时候,在block 又调用self的方法.形成你中有我,我中有你,谁都无法将谁释放的困局 ...

  2. codevs 1031 质数环

    题目描述 Description 一个大小为N(N<=17)的质数环是由1到N共N个自然数组成的一个数环,数环上每两个相邻的数字之和为质数.如下图是一个大小为6的质数环.为了方便描述,规定数环上 ...

  3. iOS开发工具——统计Crash的工具Crashlytics－备用

    简介 Crashlytic 成立于2011年,是专门为移动应用开者发提供的保存和分析应用崩溃信息的工具.Crashlytics的使用者包括:支付工具Paypal, 点评应用Yelp, 照片分享应用Pa ...

  4. 递归目录的shell脚本

    #! /bin/sh # 在其他目录运行时一定要加上这样的语句 # 尤其是配置在crontab里自动运行 cd `` #定义数据别名 alias statdb="/usr/local/mys ...

  5. Altium Designer 蛇行等长布线

    一． 设置需要等长的网络组 点击主菜单 Design --> Classes,在弹出的窗口中单击 Net Classes,并右键,点 Add Class 会增加一个 New Class,在该网络 ...

  6. QT：不规则窗口的实现

    主要思路:1:将窗体设为Qt::FramelessWindowHint(去掉标题栏).2:用一幅有部分区域是透明的图片作为程序的界面,并将图片透明的地方设为穿透. 3:重载程序的鼠标事件. 运行时截图 ...

  7. 牛逼的 弹出层 layer ！！！

    功能强大,实用,操作方便,文档齐全. http://layer.layui.com/api.html 常用功能代码: <!doctype html> <html> <he ...

  8. 易pc，1G容量以上的u盘，另外还要一台装了windows系统的电脑。

    一.硬件:易pc,1G容量以上的u盘,另外还要一台装了windows系统的电脑. 二.软件: 1.windows xp的安装包.考虑到易PC的硬盘容量,还是用精简版的吧,比如“Deepin XP Li ...

  9. 附加、分离数据库和备份、还原数据库的区别（转载于中雪的BLOG）

    备份和恢复的概念: 备份和恢复组件是SQL Server的重要组成部分.备份就是指对SQL Server数据库及其他相关信息进行拷贝,数据库备份记录了在进行备份这一操作时数据库中所有数据的状态,如果数 ...

  10. HDU_2027——统计元音

    Problem Description 统计每个元音字母在字符串中出现的次数.   Input 输入数据首先包括一个整数n,表示测试实例的个数,然后是n行长度不超过100的字符串.   Output ...