<!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. 浅析jQuery中常用的元素查找方法总结

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  2. 个人总结ANDROID开发事项

    theme:none,Holo Dark(全黑),Holo Light(全白),Holo Light width Dark action Bar(全白,活动栏是黑) Create Activity: ...

  3. find中的 time 参数

    find手册中对time的解释:以 atime 为例: -atime n File was last accessed n*24 hours ago. When find figures out ho ...

  4. 剑指Offer04 重建二叉树

    代码有问题 /************************************************************************* > File Name: 04_ ...

  5. HttpServletResponse接口

    public interface HttpServletResponse extends ServletResponse 描述一个返回到客户端的HTTP回应.这个接口允许Servlet程序员利用HTT ...

  6. 4种处理excel文件的技术

    1.OLE Automation:处理excel文件会启动一个excel的进程,程序和excel进程通信来处理excel文件,这种方式占用服务器资源,不适合于网站的开发. 2.把Excel当成数据库, ...

  7. 北大ACM(POJ1010-STAMPS)

    Question:http://poj.org/problem?id=1010问题点:DFS.剪枝. Memory: 220K Time: 32MS Language: C++ Result: Acc ...

  8. javascript将浮点数转换成整数的三个方法

    浮点数转换成整数方法有很多,本例为大家介绍常用的三个方法,如果读者想到其他好用方法,也可以交流一下   Summary 暂时我就想到3个方法而已.如果读者想到其他好用方法,也可以交流一下 parseI ...

  9. [Android开发系列]IT博客应用V1.3

    首先,感谢使用这款软件并给我意见的朋友们,有你们的意见,才有了这个版本. 其次,检索功能和分类筛选功能(如果是你提的意见,记得在下面mark哦,毕竟读代码你能发现,其实发意见这个就是用自己的邮箱给自己 ...

  10. 关于App Transport Security的更新，中英文对照 --Xcode 7 --iOS9

    章节都为本人定义,无抄袭,其中英文部分内容为官方文档摘抄以及自己总结,翻译的不好,敬请指正 App Transport Security(暂且翻译为app传输安全) What is ATS? App ...