<!doctype html>

<html>

<head>

<title>test</title>

<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />

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

</head>

<body>

<div class="tabs">

    <ul id="tabs">

        <li class="tab-nav">管理导航</li>

        <li class="tab-nav-action">系统设置</li>

        <li class="tab-nav">用户管理</li>

        <li class="tab-nav">内容管理</li>

        <li class="tab-nav">其他管理</li>

    </ul>

</div>

<div id="tabs-body" class="tabs-body">

    <div style="display:block">

    1111111

    </div>

    <div style="display:none">

    222222222

    </div>

    <div style="display:none">

    33333333333

    </div>

    <div style="display:none">

    4444444444

    </div>

    <div style="display:none">

    555555555555555

    </div>

</div>

<script type="text/javascript">

$(document).ready(function (){

    $('#tabs li').hover(function(){

    	var index = $(this).index();

        var divs = $('#tabs-body').find('div');

        $('#tabs li').removeClass('active');

        $(this).addClass('active');

        divs.hide();//隐藏所有选中项内容

        divs.eq(index).show(); //显示选中项对应内容

    });

});

</script>
另外一种：
<script type="text/javascript">

$(document).ready(function (){

    $('#tabs').find('li').click(function(){ //使用find()获取元素效率更高

    	var index = $(this).index();

    	$('#tabs').find('li').removeClass('active');

    	$(this).addClass('active');

    	$("#tabs-body").find("div").eq(index).show().siblings().hide();

    });

});

</script>
</body> </html>

　　看到一种更简便且可以大范围使用的http://www.cnblogs.com/Denny_Yang/archive/2010/10/24/1859666.html；

222222222
33333333333
4444444444
555555555555555

jquery中简易tab切换的更多相关文章

  1. jquery-11 jquery中的事件切换如何实现

    jquery-11 jquery中的事件切换如何实现 一.总结 一句话总结:事件切换hover()和toggle()函数.参数两个,都是函数,依次执行两个函数. 1.如何实现单击切换图片? 用togg ...

  2. 自己编写jQuery插件之Tab切换

    自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...

  3. layui中的tab切换

    tab切换是常见的效果,为了方便经常使用插架中自带的,下面是layui中自带的tab切换效果, 主要代码如下: <!DOCTYPE html> <html lang="en ...

  4. element UI中的tab切换栏

    html代码:(用的是el-tab组件) <el-tabs v-model="activeIndex" type="border-card" @tab-c ...

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

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

  6. jquery写的tab切换效果 非常简单

    自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...

  7. jquery简易tab切换

    切换tab 使用eq()函数 eq() 方法将匹配元素集缩减值指定 index 上的一个. //为项目 3 设置红色背景 <ul> <li>list item 1</li ...

  8. 封装jQuery插件实现TAB切换

    先上效果图: 直接上代码: index.html <!DOCTYPE html> <html lang="en"> <head> <met ...

  9. Jquery实现横向tab切换

    //需求:鼠标放在不同的导航栏上,下面显示的内容自动切换 //代码如下 <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. java和C#中 定义变量，加一个小括号是什么意思。。。

    在群里灌水发现,有人这样定义字符串,感觉很好奇..又问了群友,群友说这样定义没问题.. String strtemp = ("test"); 我自己试了下,java和C#都可以,C ...

  2. label添加手势（触摸改变其背景颜色）

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  3. 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果

    本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...

  4. http错误码大全

    响应码由三位十进制数字组成,它们出现在由HTTP服务器发送的响应的第一行.响应码分五种类型,由它们的第一位数字表示:1.1xx:信息,请求收到,继续处理2.2xx:成功,行为被成功地接受.理解和采纳3 ...

  5. mysql_DML_delete

    delete from 表名   删除表里的数据 可以配合where试用

  6. eclipse bookmark的使用

    为什么要使用bookmark 写代码一般不是从上往下写,经常在几个模块之间变换的写,你可能使用搜索功能ctrl+f,ctrl+c,这样查找位置将会变的非常痛苦. 因为重要的位置一般就那么几个,如定义部 ...

  7. Python 标准库 urllib2 的使用细节[转]

    转自[http://zhuoqiang.me/python-urllib2-usage.html] Python 标准库中有很多实用的工具类,但是在具体使用时,标准库文档上对使用细节描述的并不清楚,比 ...

  8. Strom实现数字累加Demo

    import java.util.Map; import backtype.storm.Config; import backtype.storm.LocalCluster; import backt ...

  9. C#之使用随机数

    1.C#自带随机数函数 using System; System.Random ran = new System.Random();int n = ran.Next(100, 1000);//产生10 ...

  10. 百度地图LBS开放平台AK一直没有用

    http://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924;114.21892734521,29.57542 ...