<!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. ZOJ 3871 Convex Hull（计算几何、凸包）

    题意:给n个点,|x[i]|,|y[i]| <= 1e9.求在所有情况下的子集下(子集点数>=3),凸包的面积和. 这题主要有几个方面,一个是凸包的面积,可以直接用线段的有向面积和求得,这 ...

  2. [转]utf8编码原理详解

    from : http://blog.csdn.net/baixiaoshi/article/details/40786503 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态 ...

  3. 【转】Caffe初试（九）solver及其设置

    solver算是caffe的核心的核心,它协调着整个模型的运作.caffe程序运行必带的一个参数就是solver配置文件.运行代码一般为 #caffe train --solver=*_solver. ...

  4. 【笔记】js操作cookie

    $.cookie('the_cookie'); // 读取 cookie            $.cookie('the_cookie', 'the_value', { expires: 7 }); ...

  5. jstl自定义时间格式

    <fmt:formatDate value='${time}' pattern='yyyy-MM-dd HH:mm:ss'/> <s:iterator>下的<s:prop ...

  6. 安天移动安全应对“DressCode”威胁，发布企业移动威胁检查工具

    近日,一种名为"DressCode"的恶意代码引起了国内安全行业的关注,该恶意代码以企业员工的移动设备作为跳板对企业内网进行攻击,对企业安全造成严重威胁.安天移动安全公司威胁情报团 ...

  7. mysql介绍及安装

    一.MySQL介绍 1.标志 MySQL的海豚标志的名字叫"sakila",它是由MySQL AB的创始人从用户在"海豚命名"的竞赛中建议的大量的名字表中选出的 ...

  8. RSA算法学习

    package com.test.rsa; /* * 为了选择公钥和私钥,Bob必须执行如下步骤: * 1)选择两个大素数p和q.那么p和q应该多大呢?该值越大,RSA越难于破解,但是执行加密和解密所 ...

  9. Jquery便利对象

    xhr=[object object]    $.each(xhr, function (key, val) {                     alert(key + '=' + val); ...

  10. Python-面向对象

    面向过程变成:函数式变成,C程序等 面向对象编程:C++,Java,Python等   类和对象: 类:是对事物的抽象,比如人类.球类 对象:是类的一个实例,比如足球.篮球   实例说明: 球类可以对 ...