一个简单的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. Notepad++ Java开发环境配置

    1. 安装JDK 下载JDK 6下载 http://developers.sun.com.cn/download/java_se.html 运行安装程序,按照屏幕提示完成JDK 6的安装,下面为安装路 ...

  2. C++虚函数表解析(转)

    C++中的虚函数的作用主要是实现了多态的机制.关于多态,简而言之就是用父类型别的指针指向其子类的实例,然后通过父类的指针调用实际子类的成员函数.这种技术可以让父类的指针有“多种形态”,这是一种泛型技术 ...

  3. Calling a Web API From a .NET Client (C#)

    on|January 20, 2014 1760 of 2013 people found this helpful Print Download Completed Project This tut ...

  4. rnqoj-28-合唱队形-最长上升子序列

    想当年大一的时候,一个最长上升子序列的问题使得我的罚时上升了不少....当年还是图样啊 这道题目本质就是求最长上升子序列 #include<stdio.h> #include<str ...

  5. POJ-魔兽世界之一：备战

    描述 魔兽世界的西面是红魔军的司令部,东面是蓝魔军的司令部.两个司令部之间是依次排列的若干城市. 红司令部,City 1,City 2,……,City n,蓝司令部 两军的司令部都会制造武士.武士一共 ...

  6. Css定位-定位

    在CSS中一共有N种定位方式,其中,static ,relative,absolute三种方式是最基本最常用的三种定位方式.他们的基 本介绍如下. static默认定位方式 relative相对定位, ...

  7. [实战]记一次PUT方法拿下网站shell

    第一次用方法拿shell,之前遇到的都是没有写入权限的. 站太辣鸡,纯粹练手,就不打码了. 此次实战会用到的HTTP请求方法: OPTIONS,PUT,MOVE/COPPY * 战前准备 0x01 什 ...

  8. Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现

    UI系列教程第八课:Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...

  9. 魅蓝Note有几种颜色 魅蓝Note哪个颜色好看

    http://www.pc841.com/shoujizhishi/39882.html http://news.mydrivers.com/1/359/359443.htm 魅族发布首款千元高性价比 ...

  10. Android 之 资源文件的介绍及使用

    Android 之 资源文件的介绍及使用 1.资源的简单介绍:  在res文件夹中定义:字符串.颜色.数组.菜单.图片.视频等:在应用程序中使用这些资源.  2.使用资源的长处:降低代码量,同一时候为 ...