Jquery的Tabs内容轮换效果实现代码,几行搞定
更新时间：2014年02月12日 10:05:49 作者：
本篇文章主要是对Jquery的Tabs内容轮换效果的实现代码进行了介绍。几行代码轻松搞定
复制代码 代码如下:
<!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>
<title>Jquery的Tabs内容轮换效果实现代码,几行搞定</title>
<script language="javascript" type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script>
<style type="text/css">
* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#404040;}
.tabs { margin:10px 0 0 20px; width:360px; position:relative; overflow:hidden; height:1%; height:160px;}
.tabs span { z-index:2; font-size:12px; border:1px solid #d5d5d5; width:95px; height:25px; line-height:25px; text-align:center; float:left; margin-right:5px; cursor:pointer;}
span.active { background-position:0 -25px; background-color:#d5d5d5;}
#tab-01, #tab-02, #tab-03 { position:absolute; top:26px; left:0; width:338px; padding:10px; height:93px; border:1px solid #d5d5d5; z-index:1;}
#tab-02, #tab-03 { display:none;}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.tabs span').mouseover(function () {
//div隐藏
$('.tabs div').hide();
//查找.tabs span同辈元素span 后面紧邻的同辈元素div显示
$(this).siblings('span').removeClass('active').end().addClass('active').next('div').show();
});
});
</script>
</head>
<body>
<div class="tabs">
<!-- 默认第一个tab为激活状态 -->
<span class="active">热点新闻</span>
<div id="tab-01">news</div>
<span>娱乐新闻</span>
<div id="tab-02">enteriment</div>
<span>就业形势</span>
<div id="tab-03">jobs</div>
</div>
</body>
</html>
相关文章
要实现这样的一个功能复选框勾选时给input表单赋值，复选框取消时将表单值清除，需要的朋友可以参考下2014-05-05
JQuery团队打造的javascript单元测试工具QUnit介绍
元测试又称为模块测试，是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。单元测试主要是用来检验程式的内部逻辑，也称为个体测试、结构测试或逻辑驱动测试。通常由撰写程式码的程式设计师负责进行。2010-02-02
本文主要分享了jquery实现表单获取短信验证码的代码。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
文字逐行或多行滚动跑马灯插件，基于Jquery。命名为Jquery.RollTitle。支持在一个页面声明多个滚动区 (就为了要这点才写了这个)2010-07-07
这篇文章主要介绍了解决jquery实现的radio重新选中的问题的方法和示例，十分的实用，有需要的小伙伴可以参考下。2015-07-07
利用JQUERY简单的实现功能菜单的折叠效果。本人初学，写后台稍多一点，很少写前台的效果。还请大虾们多多指教。2010-09-09
本篇文章介绍了，基于jQuery选择器的整理集合。需要的朋友参考下2013-04-04
在很多网站尤其在一些购物网站上，展示商品的列表页提供了许多商品，用户可以选择商品的展示方式如列表方式展示和橱窗方式展示等。在本例中，将给您讲述如何实现这种效果2011-10-10
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
处理业务数据，产生JSon数据，供JqueryRequest.aspx调用2010-03-03
jquery动态创建页面元素，mark一下，以备以后查询时使用。以创建div和input为例。2010-12-12
最新评论