<!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. tp5 model 中的软删除

    model中需use traits\model\SoftDelete; // 数据表中需添加一个 delete_time 字段保存删除时间 namespace app\index\model; use ...

  2. 如何正确的做WEB端的压力测试

    1.对要测试的系统进行分析,明确需要对哪一块做压力测试.比如:淘宝网站双十一期间,秒杀跟支付,此模式用户操作中占比比较大 再比如:游戏,登录--开始战斗--结束战斗这种混合模式在用户操作中占比较大 那 ...

  3. 网页端打开手机上的app

    iOS/Android 浏览器(h5)及微信中唤起本地APP 在移动互联网,链接是比较重要的传播媒质,但很多时候我们又希望用户能够回到APP中,这就要求APP可以通过浏览器或在微信中被方便地唤起. 这 ...

  4. React学习笔记-7-销毁阶段

    销毁阶段可以使用的函数:componentWillUnmount:在删除组件之前进行清理操作,比如计时器和事件监听器.因为这些函数都是开发者手动加上去的,react不知道,必须进行手动清理. 实例第一 ...

  5. 爬虫requests模块 1

    让我们从一些简单的示例开始吧. 发送请求¶ 使用 Requests 发送网络请求非常简单. 一开始要导入 Requests 模块: >>> import requests 然后,尝试 ...

  6. TDD学习笔记【一】----序言

    提到TDD大多数程序员的疑问: 为什么我要写两份程序? 为什么我要写程序来验证我已经知道的结果? 我又不是SA,可能也不懂domain,怎么产生一开始的test case? 最后的感想就变成是: 1. ...

  7. android开发读书笔记

    第九章心得: HAL ( Hardware Abstraction Layer,硬件抽象腔,〉是建立在Linux驱动之上的一套翻字库.这套程序 j率并不属于 Linux 内核, 而是属于 Linux ...

  8. Python 格式化输出

    转载 今天写程序又记不清格式化输出细节了--= =索性整理一下. 注意: 与C/C++  不同的是这里括号后面不需要加' , '号. python print格式化输出. 1. 打印字符串 print ...

  9. time的用法

    线程计时器(System.Threading.Timer) System.Windows.Threading.DispatcherTimer tRecorderTimer; if (tRecorder ...

  10. asp.net 字符串替换、截取和从字符串中最后某个字符 开始截取

    有时候要在一段字符串里面把某些字符替换成其他字符,怎么办? 例如: string image=@"csks/news/user_top/qqqq/qqqq.jpg"; image ...