<!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=gb2312" />
<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>
<!-- 代码 结束 -->

<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>来源：<a href="http://www.datouwang.com/" target="_blank">大头网</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
<p><script src="http://www.datouwang.com/img/js/demo_ad.js"></script><center style="display:none"><script src="http://www.datouwang.com/img/js/demo_tj.js"></script></center></p>
</div>

</body>
</html>

________

jquery之选项卡效果的更多相关文章

  1. Jquery实现选项卡效果

    <script type="text/javascript"> $(document).ready(function(){ $('.ct:gt(0)').hide(); ...

  2. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  3. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  5. jquery左右滑动效果的实现

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

  6. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  7. JQuery实现广告效果（滚动切换）

    JQuery实现广告效果(滚动切换)   Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...

  8. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

  9. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

随机推荐

  1. OVS - commands

    journalctl -t ovs-vswitchd ovs-vsctl show ovs-ofctl show br0 set vlanid ovs-vsctl set port eth0 tag= ...

  2. 内联函数 inline 漫谈

    内联函数存在的结论是: 引入内联函数是为了解决函数调用效率的问题 由于函数之间的调用,会从一个内存地址调到另外一个内存地址,当函数调用完毕之后还会返回原来函数执行的地址.函数调用会有一定的时间开销,引 ...

  3. win8.1点击“更改电脑设置”无反应（闪退）

    系统:win8.1 专业版 症状:win键+C → 设置 → 更改电脑设置,无反应. 尝试办法: 1.SFC /scannow扫描修复,扫描出错误但无法修复.因为曾经为了节省空间,用DISM++清理了 ...

  4. 新建aix实例

    http://www.cnblogs.com/kfarvid/archive/2010/12/21/1912553.html   DB2数据库 http://wenku.baidu.com/view/ ...

  5. Spring中管理Bean以及解析XML

    Spring是分层的轻量级框架 以IoC(Inverse of Control 反转控制)和AOP(Aspect Oriented Programming 面向切面编程)为核心 应用Spring的好处 ...

  6. gcc编译错误表

    conversion from %s to %s not supported by iconv”iconv 不支持从 %s 到 %s 的转换” iconv_open”iconv_open” no ic ...

  7. Python 文件Hash(MD5,SHA1)

    import hashlib import os,sys   def CalcSha1(filepath):     with open(filepath,'rb') as f:         sh ...

  8. lucene特殊字符处理

    这是个郁闷的问题,今天遇到了,但在lucene中查询的关键字保护有特殊字符,譬如--,会出现如下异常: org.apache.lucene.queryParser.ParseException: Ca ...

  9. 《Peering Inside the PE: A Tour of the Win32 Portable Executable File Format》阅读笔记二

    Common Sections The .text section is where all general-purpose code emitted by the compiler or assem ...

  10. 第15章 I/O（输入/输出）

    在变量.数组和对象中存储的数据是暂时存在的,程序结束后它们就会丢失.为了能够永久地保存创建的数据,需要将其保存在磁盘文件中,这样就可以在其它程序中使用它们.Java的I/O技术可以将数据保存到文本文件 ...