<!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. xUtils的介绍

    鉴于大家的热情,我写了一篇Android 最火框架XUtils之注解机制详解<-点击查看 xUtils简介 xUtils 包含了很多实用的android工具. xUtils 最初源于Afinal ...

  2. IOS UIwebView 加载网络图片 使用相对地址

    方法一: 在html文件内直接使用file:///user//xx//image.png的绝对路径 注:这样可以显示图片,但是如果在程序目录修改,图片就不能显示 方法二: 在html使用占位符,如:在 ...

  3. Android&iOS崩溃堆栈上报

    Android&iOS崩溃堆栈上报 原文地址:http://www.cnblogs.com/songcf/p/4885468.html 通过崩溃捕获和收集,可以收集到已发布应用(游戏)的异常, ...

  4. 【转】使用断言NSAssert()调试程序错误

    NSAssert()只是一个宏,用于开发阶段调试程序中的Bug,通过为NSAssert()传递条件表达式来断定是否属于Bug,满足条件返回真值,程序继续运行,如果返回假值,则抛出异常,并切可以自定义异 ...

  5. mina 字节数组编解码器的写法 II

    I 里面的写法不够严谨,这也是我之前说它简陋的主要原因,下面来个更加严谨.完整一点儿的: ByteArrayEncoder.java package org.bruce.mina.cpp.codec; ...

  6. web前端开发（6）

    为了避免全局变量泛滥导致冲突,最简单有效的办法是用匿名函数将脚本包起来,让变量的作用域控制在函数之内.

  7. js 回车键 跳转到下一个输入框

    window.document.onkeydown(){ if(event.keyCode==13) event.keyCode=9; }

  8. codeforces 613B B. Skills(枚举+二分+贪心)

    题目链接: B. Skills time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  9. IO输入输出

    编写TextRw.java的Java应用程序,程序完成的功能是:首先向TextRw.txt中写入自己的学号和姓名,读取TextRw.txt中信息并将其显示在屏幕上. package com.hanqi ...

  10. [转]移动App测试中的最佳做法

    Daniel Knott 用过各种不同编程语言和软件质量保证工具.他在软件开发和测试方面干了七年,自2010年起,他一直在德国汉堡的XING AG公司就职,几个项目里,比如XING调查和XING建议, ...