一个简单的tab切换代码；

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>tab切换</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<style type="text/css">

#nav_list{height:25px; width:300px;}

#nav_list div{ float:left; width:100px; line-height:25px; background:#666; text-align:center;}

#nav_list div.cur{ background:#C63; color:#fff;}

#nav_con{ width:298px; height:200px; border:solid 1px #999;}

#nav_con div{ display:none;}

</style>

<div id="nav_list">

    <div class="cur">nav1</div>

    <div>nav2</div>

    <div>nav3</div>

</div>

<div id="nav_con">

    <div style="display:block">tab1tab1tab1tab1tab1tab1tab1</div>

    <div>tab2tab2tab2tab2tab2tab2tab2</div>

    <div>tab3tab3tab3tab3tab3tab3tab3</div>

</div>

<script type="text/javascript">

$("#nav_list div").hover(function(){//如果想点击再切换的话把hover改成click

        $(this).addClass('cur').siblings().removeClass('cur');//鼠标滑过时给当前的div添加class

        var $index = $("#nav_list div").index(this);//获取当前的索引值

        $("#nav_con div").eq($index).show().siblings().hide();//tab内容等于当前鼠标滑过的索引值时，显示对应的内容

        return true;

    },function(){

        return false;//鼠标离开执行的操作，返回一个flase

        });

</script>

</body>

</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. 清除oracl中有主外键关联的表中的部分数据。

    1.禁用主外键BEGINfor c in (select 'ALTER TABLE '||TABLE_NAME||' DISABLE CONSTRAINT '||constraint_name||' ...

  2. Swift—下标-备

    看下面的示例代码是不是使用过: var studentList: String[]  = ["张三","李四","王五"] studentL ...

  3. 转：40多个关于人脸检测/识别的API、库和软件

    文章来自于:http://blog.jobbole.com/45936/ 自从谷歌眼镜被推出以来,围绕人脸识别,出现了很多争议.我们相信,不管是不是通过智能眼镜,人脸识别将在人与人交往甚至人与物交互中 ...

  4. 转：15 Best Responsive Web Design Testing Tools

    Responsive Web Design is regarded as being the approach which suggests that web design and developme ...

  5. MetaData元数据

    一.基础 定义:数据库.表.列相关信息的描述.    何时使用:想取得对数据库的信息时使用.    一]数据库元数据——通过DataBaseMetaData            DataBaseMe ...

  6. 51单片机C语言学习笔记8：单片机C51编程规范

    1.单片机C51编程规范- 前言  为了提高源程序的质量和可维护性,从而最终提高软件产品生产力,特编写此规范. 2.单片机C51编程规范-范围 本标准规定了程序设计人员进行程序设计时必须遵循的规范.本 ...

  7. SQL Server error "Xml data type is not supported in distributed queries" and workaround for it

    Recently while working with data migration,got an error while running a following query where Server ...

  8. [原创]# 玩转nginx系列

    首先先上如何彻底删除nginx 看到这个标题的小伙伴都惊呆了,还不知道怎么搞,却叫我怎么卸载.为什么我要这样,其实,Reset也是一种解决问题的方式嘛. 首先执行下卸载命令 sudo apt-get ...

  9. Apache HttpComponents Client 4.0快速入门/升级-2.POST方法访问网页

    Apache HttpComponents Client 4.0已经发布多时,httpclient项目从commons子项目挪到了HttpComponents子项目下,httpclient3.1和 h ...

  10. 关于Javascript语言中this关键字（变量）的用法

    最近很多 Javascript初学者朋友总在问: Javascript 的this 关键字的用法.我在这里索性总结一下 this关键字的用法. this 关键字是面向对象编程语言中的一个重要概念!在J ...