<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>简单jquery tab选项卡切换 - 站长素材</title>

<style type="text/css">

*{margin:0 auto;padding:0;list-style-type:none;}

body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

/* tab */

#tab{width:400px;position:relative;margin:40px auto;}

#tab .tab_menu{width:100%;float:left;position:absolute;z-index:1;}

#tab .tab_menu li{float:left;width:92px;height:30px;line-height:30px;border:1px solid #ccc;border-bottom:0px;cursor:pointer;text-align:center;margin:0 2px 0 0;}

#tab .tab_box{width:400px;height:100px;clear:both;top:30px;position:relative;border:1px solid #CCC;background-color:#FF0;}

#tab .tab_menu .selected{background-color:yellow;cursor:pointer;}

.hide{display:none;}

.tab_box div{padding:10px;}

</style>

<script type="text/javascript" src="js/jQuery1.7.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    var $tab_li = $('#tab ul li');

    $tab_li.hover(function(){

        $(this).addClass('selected').siblings().removeClass('selected');

        var index = $tab_li.index(this);

        $('div.tab_box > div').eq(index).show().siblings().hide();

    });

});

</script>

</head>

<body>

<div id="tab">

    <ul class="tab_menu">

        <li class="selected">时事</li>

        <li>体育</li>

        <li>新闻</li>

    </ul>

    <div class="tab_box">

        <div>时事的内容</div>

        <div class="hide">体育的内容</div>

        <div class="hide">新闻的内容</div>

    </div>

</div>

</body>

</html>

tab22的更多相关文章

  1. 【转】高通平台android 环境配置编译及开发经验总结

    原文网址:http://blog.csdn.net/dongwuming/article/details/12784535 1.高通平台android开发总结 1.1 搭建高通平台环境开发环境 在高通 ...

随机推荐

  1. 本周psp个人作业

    计划--用一天的时间来做这个项目 需求分析--作为一个观众,我想要知道每局的比分,以便我更了解比赛情况. 生成设计文档--用类图来进行说明. 设计复审---无 代码规范--3H 具体设计--建立数据库 ...

  2. Windows Server 2008 R2 IIS7.5 部署 MVC HTTP 404.0 Not Found 错误

    如图 在Windows Server 2008 R2 IIS7.5 部署 MVC HTTP 404.0 Not Found 错误,在Win7环境下测试正常,在百度中查找相关解决方法,如修改配置文件等, ...

  3. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  4. 基因匹配（bzoj 1264）

    Description 基因匹配(match) 卡卡昨天晚上做梦梦见他和可可来到了另外一个星球,这个星球上生物的DNA序列由无数种碱基排列而成(地球上只有4种),而更奇怪的是,组成DNA序列的每一种碱 ...

  5. ***PHP 数组排序 +php二维数组排序方法（PHP比较器）

    PHP - 一维数组的排序函数 在本节中,我们将学习如下 PHP 数组排序函数: sort() - 以升序对数组排序 rsort() - 以降序对数组排序 asort() - 根据值,以升序对关联数组 ...

  6. PHP 版本判断 version_compare() 函数

    在度娘中简单的找了下,判断当前PHP的版本是否高于某个版本,或者低于某个版本的方法 显示的结果基本上都是一样的,好吧,要不是我忘记了version_compare()这个函数我才不会去找度娘,果断找以 ...

  7. 【NodeJS】环境变量配置

    安装完Node后,NodeJS自带npm.于是我照着网上的教程想搭一个脚手架.结果报错: ’node’ 不是内部或外部命令,也不是可运行的程序 但是我检查了一下系统环境变量,path底下有正确引用no ...

  8. Python-基础练习题2

    编写登陆接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 #!/usr/bin/env python # _*_ coding:utf8 _*_ import getpass Userna ...

  9. echarts之tooltip

    tooltip:提示框,鼠标悬浮交互时的信息提示. 当trigger为'item'时 tooltip : { trigger: 'item' }, 当trigger为'axis'时 tooltip : ...

  10. AugularJS特性

    AugularJS特性 AngularJS是一个新出现的强大客户端技术,提供给大家的一种开发强大应用的方式.这种方式利用并且扩展HTML,CSS和javascript,并且弥补了它们的一些非常明显的不 ...