<!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. HttpUtil

    1.发送doPost请求,在web那边使用request.setCharacterEncoding("UTF-8");保证中文不乱码,不需要第三方jar包 public stati ...

  2. quickSort算法导论版实现

    本文主要实践一下算法导论上的快排算法,活动活动. 伪代码图来源于 http://www.cnblogs.com/dongkuo/p/4827281.html // imp the quicksort ...

  3. Java_File类讲解_打印目录树状结构_递归算法

    package cn.xiaocangtian.testFile; import java.io.File; public class FileTree { public static void ma ...

  4. jquery遍历不同色彩的li

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

  5. 51nod1174(RMQ)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1174 题意:中文题诶- 思路:RMQ模板题 关于RMQ: h ...

  6. Java面试常见知识点总结(二)

    11.构造方法(构造器): 构造方法是一种特殊的方法,具有以下特点.    (1) 构造方法的方法名必须与类名相同.    (2) 构造方法没有返回类型,也不能定义为void,在方法名前面不声明方法类 ...

  7. 使用Nito.AsyncEx实现异步锁（转）

    转载地址:http://www.cnblogs.com/1zhk/p/5269279.html Lock是常用的同步锁,但是我们无法在Lock的内部实现异步调用,比如我们无法使用await. 以下面的 ...

  8. Delphi编程时候诡异地出现ORA-00937错误，记录解决它的思路和方法

    首先需要说明,这个问题的出现需要几个前提:使用微软的Oracle驱动(使用Oracle自己的驱动不会出现这个问题).使用绑定变量法,使用Format等方式拼接SQL也不会出现这个问题,还有一些诡异的规 ...

  9. Java源码之 java.util.concurrent 学习笔记01

    准备花点时间看看 java.util.concurrent这个包的源代码,来提高自己对Java的认识,努力~~~ 参阅了@梧留柒的博客!边看源码,边通过前辈的博客学习! 包下的代码结构分类: 1.ja ...

  10. SSH ProxyCommand

    简单的说就是SSH层面的代理服务器,实现通过跳板机执行SSH相关命令到目标机器的代理服务.