当前位置：首页 → 问答吧 → 有个tab切换的小问题，大家帮下忙。

有个tab切换的小问题，大家帮下忙。

时间：2009-04-12

来源：互联网

复制代码

<!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>无标题文档</title>
<style>
<!--
*{padding:0; margin:0;}
.search-select li,.s-title li{float:left; line-height:20px; margin-left:10px;}
.search-form,.list{clear:both;}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="skiyotabs.js"></script>
<script type="text/javascript">
$(function(){
$('#quickSearch').SkiyoTabs({
className:'selected', //被选中时候li的样式.可以参看上面的样式默认为selected
eventName:'click'
});
$('#ranking').SkiyoTabs({
className:'selected', //被选中时候li的样式.可以参看上面的样式默认为selected
eventName:'mouseover'
});
});
</script>
</head>
<body>
<div class="fun-area">
<span class="fun-bar">快捷搜索</span>
<div id="quickSearch">
<ul class="search-select t">
<li><a href="#quickSearch1">全文</a></li>
<li><a href="#quickSearch2">公司名</a></li>
<li><a href="#quickSearch3">职位名</a></li>
</ul>
<a class="advanced" href="#">高级搜索</a>
<div id="quickSearch1" class="search-form c">
<form>
<span class="search-q"><input id="allkey" value="请输入您需要搜索的关键字" name="search_text" type="text"></span>
<button name="search" type="submit"> 搜索 </button>
</form>
</div>
<div id="quickSearch2" class="search-form c">
<form>
<span class="search-q"><input id="comkey" value="请输公司的关键字" name="search_text" type="text"></span>
<button type="submit"> 搜索 </button>
</form>
</div>
<div id="quickSearch3" class="search-form c">
<form>
<span class="search-q"><input id="jobkey" value="请输职位的关键字" name="search_text" type="text"></span>
<button type="submit"> 搜索 </button>
</form>
</div>
</div>
</div>
<div class="col-bar" id="ranking">
<div class="s-title">
<h2>热门榜单</h2>
<ul class="t"><li><a href="#rank1">企业</a></li><li><a href="#rank2">人才</a></li></ul>
</div>
<div class="list c" id="rank1">
<ul>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
</ul>
</div>
<div class="list c" id="rank2" style="display:none;">
<ul>
<li><a href="#" target="_blank" title="">jQuery插件查看点击数</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">jQuery插件查看点击数</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">jQuery插件查看点击数</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
<li><a href="#" target="_blank" title="">湖北工业大学校园招聘</a></li>
</ul>
</div>
</div>
</body>
</html>

以上是html代码

复制代码

(function($) {
$.fn.SkiyoTabs = function(options) {
var opts = $.extend({}, $.fn.SkiyoTabs.defaults, options);
return this.each(function() {
var target = $(this);
var div = target.find('div.c'); //---------------------------------
var tabs = target.find('ul.t li'); //---------------------------------
var now = new Date().valueOf();
var flag = true;
function Tabs() {
if(!flag) { //第一次必须执行
if(new Date().valueOf() - now < 300) { //阻止快速事件
return false;
}
} else {
flag = false;
}
if($(this).hasClass(opts.className)) { //如果当前被击中就终止
return false;
}
var href = $(this).find("a").attr("href");
var rel = $(this).find("a").attr("rel"); //ajax请求url
var i = div.filter(href); //当前div
if(rel) { //如果ajax请求url不为空
i.html('loading...');
$.ajax({
url: rel,
cache: false,
success: function(html) {
i.html(html);
},
error:function() {
i.html('error');
}
});
}
div.hide();
i.show();
//i.fadeIn('slow');
target.find('ul.t li').removeClass(opts.className); //---------------------------------
$(this).addClass(opts.className);
now = new Date().valueOf();
return false; //防止url出现#
}
//绑定并触发事件
tabs.bind(opts.eventName == 'all' ? 'click mouseover' : opts.eventName, Tabs).filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName);
});
};
$.fn.SkiyoTabs.defaults = {
className: 'selected',
eventName: 'all' //可以为click mouserover all
};
})(jQuery);

以上是skiyotabs.js代码。//---------------------------------标注处为改动过的地方

切换的时候在ie7和火狐中都正常，可是ie6却没反应。请大家帮我看看是什么原因！

因为标题和内容中有可能同时存在ul和div，所以我在原来的var div = target.find('div'); 基础上改成了var div = target.find('div.c'); target.find('ul li')改成了target.find('ul.t li')。 ie6就不正常了！

作者: jacksuc 发布时间: 2009-04-12

为什么不按class取呢？我看你class不同啊！

作者: kuku-1 发布时间: 2009-04-12

引用

引用第1楼kuku-1于2009-04-12 09:28发表的 :
为什么不按class取呢？我看你class不同啊！

你是说不用div和ul直接用class吗？

作者: jacksuc 发布时间: 2009-04-12