<!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. SQL(横表和纵表)行列转换，PIVOT与UNPIVOT的区别和使用方法举例，合并列的例子

    使用过SQL Server 2000的人都知道,要想实现行列转换,必须综合利用聚合函数和动态SQL,具体实现起来需要一定的技巧,而在SQL Server 2005中,使用新引进的关键字PIVOT/UN ...

  2. 【转】网络编程socket基本API详解

    转自:http://www.cnblogs.com/luxiaoxun/archive/2012/10/16/2725760.html socket socket是在应用层和传输层之间的一个抽象层,它 ...

  3. taskkill批量删除进程命令

    本人自用: TASKKILL /F /IM notepad --强制删除进程名中带notepad的所有进程 TASKKILL [/S system [/U username [/P [password ...

  4. C/C++面试知识点总结

    1.中缀,后缀,前缀表达式: 后缀表达式是波兰逻辑学家卢卡西维奇(Lukasiewicz)发明的一种表示表达式的方法.这种表示方式把运算符写在运算对象的后面,例如,把a+b写成ab+,所以也称为后缀式 ...

  5. 【Java EE 学习 74 下】【数据采集系统第六天】【使用Jfreechart的统计图实现】【将JFreechart整合到项目中】

    之前说了JFreechart的基本使用方法,包括生成饼图.柱状统计图和折线统计图的方法.现在需要将其整合到数据采集系统中根据调查结果生成三种不同的统计图. 一.统计模型的分析和设计 实现统计图显示的流 ...

  6. 关于Solr的使用总结的心得体会

    摘要:在项目中使用Solr作为搜索引擎对大数据量创建索引,提供服务,本文是作者对Solr的使用总结的一点心得体会, 具体包括使用DataImportHandler从数据库中近实时同步数据.测试Solr ...

  7. VS低版本打开高版本解决方案（如08打开10、12、13版本vs编译的项目）

    一.vs2005打开vs2008编译的项目:1.用记事本打开sln文件,将: Microsoft Visual Studio Solution File, Format Version 10.00 # ...

  8. android Studio 百度KEY获得发布版 SHA1 的方法

    看图说话 build-->Generate Signed APK... create new(看不懂单词意思的同胞可以参考这个网址http://www.cnblogs.com/why168888 ...

  9. PE文件格式(加密与解密3)(一)

    本次的了解主要讲解 PE的基本概念.MS-DOS文件头.PE文件头.区块.输入表.输出表等. 这里我将会结合一个简单的小程序来加深我对PE文件结构的了解. 使用学习工具:有StudyPE.LordPE ...

  10. 寒冬之下,浩瀚智能开单收银打印扫描POS为何能在批发零售门店商场 车销行业 风靡！：进销存+打印扫描POS机

    是一款适用于商超.餐饮.服装鞋帽.家电专营等等具有零售行业特点的企业,供企业管理人员用于管理.监控本品牌的市场占有率.门店覆盖区域.网点分布合理性等经济地理信息的工具平台. 1,功能一:业务抄单文章来 ...