JQuery
二款实例Jquery tab选项卡效果代码
<!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>
<link href="../images/res/master.css教程" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="http://www.google.com/网页特效api"></script>
<script type="text/网页特效">
google.load("jquery", "1.3.1");
</script>
<script type="text/javascript">
$(function(){
$("#tab1 li").each(
function(i){
$(this).click(function(){
if(!$(this).hasclass("hover")){
$("#tab1 li").removeclass("hover");
$(this).addclass("hover")
$(".list1").removeclass("tabnow");
$(".list1").eq(i).addclass("tabnow");
}
});
})
$("#tab2 li").each(
function(j){
$(this).click(function(){
if(!$(this).hasclass("hover")){
$("#tab2 li").removeclass("hover");
$(this).addclass("hover")
$(".list2").removeclass("tabnow");
$(".list2").eq(j).addclass("tabnow");
}
});
}
);
})
</script>
<div class="news">
<ul class="tab" id="tab1">
<li class="hover">公司新闻
<li>行业新闻
<li>小常识
</ul>
<div class="lists">
<div style="padding:10px 0;" class="list1 tabnow">
此处显示
class "list1" 的内容
</div>
<div class="list1">此处显示
class "list2" 的内容</div>
<div class="list1">此处显示
class "list3" 的内容</div>
</div>
</div>
<div class="products">
<ul class="tab" id="tab2">
<li class="hover">机械
<li>锻造
<li>金属
</ul>
<div>
<div class="list2 tabnow">
<div class="columnspace"
id="elem-frontproducts_list01-1277815698970" name="商品列表">
<!--#include virtual= "/comp-frontproducts_list01-1277815698970"--></div>
</div>
<div class="list2"
style="display:none">此处显示
class "list2" 的内容</div>
<div class="list2"
style="display:none">此处显示
class "list3" 的内容</div>
</div>
</div>
</body>
</html>
jquery写的tab选项卡效果
<script>
$.fn.tabs = function(tablist, tabtxt, options) {
var _tablist = $(this).find(tablist);
var _tabtxt = $(this).find(tabtxt);
//为了简化操作，强制规定选项卡必须用li标签实现
var tablistli = _tablist.find("li");
var defaults = { currenttab: 0, defaultclass: "current", isautoplay: false, steptime: 2000, switchingmode: "c" };
var o = $.extend({}, defaults, options);
var _isautoplay = o.isautoplay;
var _steptime = o.steptime;
var _switchingmode = o.switchingmode;
_tablist.find("li:eq(" + o.currenttab + ")").addclass(o.defaultclass);
//强制规定内容层必须以div来实现
_tabtxt.children("div").each(function(i) {
$(this).attr("id", "wp_div" + i);
}).eq(o.currenttab).css({ "display": "block" });
tablistli.each(
function(i) {
$(tablistli[i]).mouseo教程ver(
function() {
if (_switchingmode == "o") {
$(this).click();
}
_isautoplay = false;
}
);
$(tablistli[i]).mouseout(
function() {
_isautoplay = true;
}
)
}
);
_tabtxt.each(
function(i) {
$(_tabtxt[i]).mouseover(
function() {
_isautoplay = false;
}
);
$(_tabtxt[i]).mouseout(
function() {
_isautoplay = true;
}
)
});
// }
// else {
tablistli.each(
function(i) {
$(tablistli[i]).click(
function() {
if ($(this).classname != o.defaultclass) {
$(this).addclass(o.defaultclass).siblings().removeclass(o.defaultclass);
}
if ($.browser.msie) {
_tabtxt.children("div").eq(i).siblings().css({ "display": "none" });
_tabtxt.children("div").eq(i).fadein(600);
} else {
_tabtxt.children("div").eq(i).css({ "display": "block" }).siblings().css({ "display": "none" }); //标准样式
}
}
)
}
);
// }
function selectme(oo) {
if (oo != null && oo.html() != null && _isautoplay) {
oo.click();
}
if (oo.html() == null) {
selectme(_tablist.find("li").eq(0));
} else {
window.settimeout(selectme, _steptime, oo.next());
}
}
if (_isautoplay) {
//alert("_isautoplay:" + _isautoplay);
selectme(_tablist.find("li").eq(o.currenttab));
}
//alert(_isautoplay);
return this;
};
var username = "wbpbest";
var __sti = setinterval;
window.setinterval = function(callback, timeout, param) {
var args = array.prototype.slice.call(arguments, 2);
var _cb = function() {
callback.apply(null, args);
}
__sti(_cb, timeout);
}
//window.setinterval(hello,3000,username);
var __sto = settimeout;
window.settimeout = function(callback, timeout, param) {
var args = array.prototype.slice.call(arguments, 2);
var _cb = function() {
callback.apply(null, args);
}
__sto(_cb, timeout);
}
//注意：如果调试出错，请检查您引用的jquery版本号，当前引用版本为1.3
//参数说明：
//tablist:包裹选项卡的父级层
//tabtxt :包裹内容层的父级层
//options.currenttab:激活选项卡的序列号
//options.defaultclass:当前选项卡激活状态样式名，默认名字为"current"
//isautoplay:是否自动切换
//steptime:切换间隔时间
//switchingmode:切换方式（'c'表示click切换;'o'表示mouseover切换）
js下载地址
<script type="text/javascript" src="http://g.111cn.cn/javascript/js/php100.com.js"></script>
</script>
话题作者
头衔:无
活跃成员
