一个简单的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. 针对苹果最新审核要求为应用兼容IPv6-备用

    在WWDC2015上苹果宣布iOS9将支持纯IPv6的网络服务.2016年初开始所有提交到App Store的应用必须支持IPv6.为确保现有的应用是兼容的,我们需要注意下面几点. 不建议使用底层的网 ...

  2. Android自定义View 构造方法 遇到的一些问题

    Android开发中,经常会自定义View,那么就会使用构造方法,比如自定义MyView,继承View,会要求实现构造方法: public MyView(Context context) { supe ...

  3. office web apps server 问题和解决办法

    New-OfficeWebAppsFarm –InternalURL "http://owa.zjkhlib.com" –AllowHttp –EditingEnabled 错误1 ...

  4. HDOJ(HDU) 1570 A C

    Problem Description Are you excited when you see the title "AC" ? If the answer is YES , A ...

  5. eclipse与myeclipse工程互转

    eclipse转myeclipse: 在Myeclipse中新建web工程导入即可. myeclipse转eclipse:  在eclipse中新建web工程,把myeclipse项目中代码手动拷贝到 ...

  6. Create a simple REST web service with Python--转载

    今日尝试用python建立一个restful服务. 原文地址:http://www.dreamsyssoft.com/python-scripting-tutorial/create-simple-r ...

  7. 类型兼容原则（C++）

    类型兼容原则是指在需要基类对象的任何地方,都可以使用公有派生类的对象来替代. 通过公有继承,派生类得到了基类中除构造函数.析构函数之外的所有成员.这样,公有派生类实际具备了基类的所有功能,凡是基类能解 ...

  8. IOS 判断设备屏幕尺寸、分辨率

    根据屏幕尺寸和分辨率,ios现在数起来有6个版本. iOS 设备现有的分辨率如下: iPhone/iPod Touch 普通屏 320像素 x 480像素 iPhone .3G.3GS,iPod To ...

  9. android实现文本复制到剪切板功能(ClipboardManager)

    Android也有剪切板(ClipboardManager),可以复制一些有用的文本到剪贴板,以便用户可以粘贴的地方使用,下面是使用方法   注意:导包的时候 API 11之前: android.te ...

  10. ruby gems安装镜像

    由于每一个月都要升级两台gitlab server, ruby安装的源老是被墙,痛苦无比. 所以须要使用国内的镜像 在/home/git/gitlab/Gemfile文件里第一行改动为: # sour ...