<!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. [原创]Windows Server 2003 物理机转换为VMware虚拟机出现VSS错误的处理

    一台Windows Server 2003 物理机需要转换为VMware虚拟机,工具为Vmware vCenter Converter Standalone 6.0,转换开始就出现错误“FAILED: ...

  2. Easyui 去掉datagrid 行的样式，并点击checked 改边行颜色！

    --最近客户提出的需求 全选高亮样式太丑,每行选中不需要背景图片颜色,字体变黑色,未选中变灰色. 先把代码和改变后的图片 贴出来. /* 初始化DataFrid数据 */ initDataGrid: ...

  3. 基于SSM的租赁管理系统0.2_20161225_开发环境

    项目环境搭建 1. 开发环境 Sybase PowerDesigner 15.1.0 + MySQL 5.7.15 + Navicat 11.0.9 + eclipse EE Mars 2.0 + F ...

  4. javascript学习笔记之array.sort

    arrayName.sort()方法: 功能是实现排序(按ascii编码或按数字大小),可无参或有参使用,无参时默认升序排列.有参时可实现升序或降序排列,参数必须是具有返回值的方法,当方法表达式大于0 ...

  5. 【用xocde5打包 在IOS7以下也能显示无默认gloss 效果 图解】

    图解,只需要这几个地方修改以下就好了,看不懂的话,请留言 完毕:记着clean 以下项目文件

  6. 安装Python环境时遇到的问题

    问题描述:An error occurred during the installation of assembly 'Microsoft.VC90.MFC,version="9.0.210 ...

  7. CSV文件分割与列异常处理的python脚本

    csv文件通常存在如下问题: 1. 文件过大(需要进行文件分割)2. 列异常(列不一致,如元数据列为10列,但csv文件有些行是11列,或者4列)本脚本用于解决此问题. #coding=utf-8 ' ...

  8. echarts之tooltip-position

    当postion为Array时 tooltip : { trigger: 'axis', position:[3,3] //赋予一个[x,y]的位置 } 当postion为function时 tool ...

  9. 城管停车执法打印APP 移动云POS 现场打印告知单-执法平台+智能POS客户端系统

    市城管局城管支队工作人员使用最新配备的城管执法手持终端对便道违法停放车辆进行拍照取证. 城管执法手持终端具备拍照.现场打印.无线传输等功能,执法人员只要在该终端登录,即可随时实现对违停车辆的拍照取证. ...

  10. PHP CI框架 result()详解

    该方法执行成功返回一个对象数组,失败则返回一个空数组. 一般情况下,我们使用下面的方法遍历结果,代码就像这样: $query = $this->db->query("要执行的 S ...