<!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. Oracle数据库SQL优化

    SQL优化的最终目的是用户体验-在最短时间内让用户在页面数据.因此,执行时间是SQL优化的重要指标.在SQL查询中,I/O操作最占系统性能的.I/O操作量越大,时间越久.减少I/O操作量是优化SQL的 ...

  2. hg(Mercurial)版本库迁移到git版本库

    这几天没事干净搞迁移了,迁移完MVC又迁移版本库,还把工作电脑迁移了一下,开始用Win8.1了.这个迁移主要是因为实在不想在工作电脑上又装git又装hg了,点个右键出来一大堆菜单,况且现在git已经成 ...

  3. EasyGUI的安装

    1.下载EasyGUI 在官方网站上下载http://easygui.sourceforge.net/将安装包下载下来,放到桌面上并解压. 2.安装EasyGUI ①在开始菜单的搜索中输入cmd,打开 ...

  4. nodejs4-模块和包

    模块和包: 定义模块的方法跟sea.js类似,暴露一个接口也是使用exports. 调用一个接口就是使用require 注意:在引入模块的时候如果是同级目录需要加./,否则会报错   除了可以使用ex ...

  5. 【.NET基础】--委托、事件、线程（1）

    1,委托 是存放方法的指针的清单,也就是装方法的容器 A, 新建winform项目[01委托],项目中添加dg_SayHi.cs 委托类 用于存储方法 namespace _01委托 { //定义委托 ...

  6. MySql运算符

    算数运算符 加(+).减(-).乘(*).除(/).求余(%) 比较运算符 大于(>).小于(<).等于(=).大于等于(>=).小于等于(<=).不等于(!= 或者 < ...

  7. OpenGl从零开始之坐标变换

    http://www.tuicool.com/articles/uiayYrI OpenGL学习脚印: 坐标变换过程(vertex transformation) http://blog.csdn.n ...

  8. 第六十七篇、OC_UITableView head下拉图片放大的效果

    (一) 布置UITableview 我们首先要通过设置UITableview的内容偏移 self.tableView.contentInset 来为图片视图留出位置,这里我们的图片高度暂定为280 ; ...

  9. iOS - 使用进阶

    1. 状态栏显示风火轮 //  ViewController.m //  1.状态栏显示风火轮 // //  Created by wind on 16/11/13. //  Copyright © ...

  10. PropertyGrid排序

    解决PropertyGrid对自定义属性排序的问题. 参考了:http://www.cnblogs.com/greatverve/archive/2012/02/08/propergrid-order ...