<!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 () {
$('.tabs div').hide();
$(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>
分享到:
相关推荐
代码如下:<!... <head> <title>Jquery的Tabs内容轮换效果实现代码,几行搞定</title> <script language=”javascript” type=”text/javascript” src=”/Scripts/jquer
jquerytabs jquery选项卡 jquery tabs
jQuery代码只有几行,非常易懂,效果很好。
基于jquery tabs切换源码,demo实现了不同的切换方式,代码精简值得参考
jQuery tabs 纵向显示,jQuery tabs vertical,jQuery tabs
秋天 jQuery tabs 插件是基于jQuery框架完成的标签切换示例,您可以通过修改在自己的WEB网页中使用。 调用方法 网页案例样式
jQuery Tabs插件 PWS Tabs 演示地址:http://www.jq22.com/plugin/1752
这是一款基于bootstrap的简单jquery tabs选项卡美化效果。该tabs选项卡美观大方,使用简单,适用于多种网页场景。
jQueryTab是一款带CSS3过渡动画效果的jQuery Tabs选项卡插件。它是轻量级插件,使用简单,采用响应式设计,并支持多种CSS3动画过渡效果。
jQuery Tabs
jQueryTab是一款带CSS3过渡动画效果的jQuery Tabs选项卡插件。它是轻量级插件,使用简单,采用响应式设计,并支持多种CSS3动画过渡效果。
jQuery Tabs插件EasyTabs.js 演示地址:http://www.jq22.com/plugin/259
jquery tabs
jQuery Tabs插件 (选项卡插件) --推荐 .效果不错,使用简单的选项卡插件
使用上也非常简单,在页面中载入 jquery.ui.tabs.paging.css 和 jquery.ui.tabs.paging.js 文件,在创建 tabs 对象后再执行代码激活一下插件 $tabs.tabs('paging'); 就可以了。 压缩包内带有 demo 。
jQuery结合CSS实现简单Tabs选项卡效果
jQuery Easy Tabs选项卡插件效果演示代码,当然有的也可改造成滑动门效果,这个插件用起来还是相当顺手的,调用方法简单,效果流畅,特别是动画效果,响应鼠标滑动的效果很讨人喜欢,蓝色风格。
jquery 的 Tabs 插件,很不错,值得下载哈!