<!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. 编译器失败，错误代码为xxx

    问题:出现编译器失败,等一会儿出现csc.exe无响应,错误代码不一定是255,是其他的也可以试试 解决办法: 查看是否类似360之类的杀毒软件运行着,如果运行着,关掉然后重新试一下,应该就没有问题了 ...

  2. 【开源项目7】Android视图注入库:butterknife

    介绍 ButterKnife通过@InjectView和视图的ID注解的变量去找到并自动转换为你布局上相应的布局视图. class ExampleActivity extends Activity { ...

  3. Java异常的一个小知识

    有以下两个代码: package com.lk.A; public class Test3 { public static void main(String[] args) { try { int a ...

  4. Androidstudio 点9图报错的问题

    在eclipse上.9图能够正常使用,但是到了Androidstudio上就报错无法引用,提示找不到.9图的问题.   解决方案: Androidstudio对.9图进行了更严格的定义, 1. 如果一 ...

  5. Umbraco文档类型定义多个template

    利用这个可以同时写PC端和手机端的网站, 在Template中,建立手机端的模板: 在文档类型中,同时选择两个模板,在浏览的时候在URL后加上Template的名称 + .aspx 就可以浏览到你写的 ...

  6. [转]Web Services使用out参数

    本文转自:http://www.cnblogs.com/zhaozhan/archive/2010/10/25/1860837.html Web Services使用out参数,在SOAP协议中会跟返 ...

  7. Echarts 使用遇到的问题

    1.在使用ECharts的数据视图时,单击打开数据视图如下,当单击close按钮时,如果当前图像区域包含在一个<from></from>标签中,则会刷整个新页面, 去掉< ...

  8. C# WinForm 调用WebService

    在Winform中对数据库进行操作缺乏安全性,因而可以使用Winform调用WebService来实现对数据库的各种操作. 在VS2010中,创建一个Web服务程序,第一:创建一个空的Web应用程序, ...

  9. 运维人愿意听到的话 vs 不愿意听到的话

    在公司兼做了接近两年的远程运维工作,与内部打交道的过程中听到各种各样的话, 简单摘列一下那些似曾相识的愿意.不愿意听到的话: ”先别操作,帮忙先拷贝日志!我们调查一下答复!“  vs  ”你先重启一下 ...

  10. DWZ LookUp Suggest 教程

    单个查找带回 jsp 代码 lookup.jsp <%@ page language="java" contentType="text/html; charset= ...