用jquery写的非常好的tab菜单，嵌入到我的代码时出现了一点问题，麻烦高手指点一下

山水无言 2011-02-15 12:12:48

下面代码是从网上找到的，用jquery写的非常好的tab菜单，嵌入到我的代码时出现了一点问题，麻烦高手指点一下。

问题：
（1）单独执行下面代码时，“选项卡1”被选中，并且与“选项卡1的内容”是无缝连接的
（2）当嵌入到我的代码时（即嵌入到一个DIV中），“选项卡1”仍会被选中，但是“选项卡1”与“选项卡1的内容”有一条大约2个像素缝隙。

不知道为什么？怎么修改代码才能解决



<!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写淡入淡出的选项卡TAB菜单_网页代码站(www.webdm.cn)</title>







<style type="text/css">

ul,li{margin:0;padding:0;list-style:none;font-family: 宋体;font-size:14px;}

#tabfirst li{float:left;background-color:#868686;color:white;padding:5px;margin-right:2px;border:1px solid white;CURSOR: hand;}

#tabfirst li.tabin{background-color:#6E6E6E;border:1px solid #6E6E6E;CURSOR: hand;}

.contentfirst{

	clear:left;background-color:#6E6E6E;color:white;

	width:482px;/*内容的宽度*/

	CURSOR:arror;

	height:100px;padding:10px;display:none;font-family: 宋体;font-size:14px;}

.contentin{display:block;}

</style>







<!--<script type="text/javascript" src="http://www.webdm.cn/themes/script/jquery.js"></script>-->

<script type="text/javascript" src="jquery.js"></script>







<script type="text/javascript">

 $(function(){

 	var _tab=$('ul#tabfirst>li');

	var _con=$('div#tab_box>div');

	var _conthis;

	var _index=0;	

	_tab.mouseover(function(){

		_index=_tab.index(this);

		$(this).addClass('tabin').siblings().removeClass('tabin');

		_con.filter(':visible').stop(true,true).fadeOut(1,function(){

			_con.eq(_index).fadeIn(1)

		})

	});

})

</script>







</head>

<body>

<ul id="tabfirst">

	<li class="tabin">选项卡1</li>

	<li>选项卡2</li>

	<li>选项卡3</li>

	<li>选项卡4</li>

	<li>选项卡5</li>

	<li>选项卡6</li>

	<li>选项卡7</li>

	<li>选项卡8</li>

</ul>

<div id="tab_box">

	<div class="contentin contentfirst">选项卡1的内容</div>

	<div class="contentfirst">选项卡2的内容</div>

	<div class="contentfirst">选项卡3的内容</div>

	<div class="contentfirst">选项卡4的内容</div>

	<div class="contentfirst">选项卡5的内容</div>

	<div class="contentfirst">选项卡6的内容</div>

	<div class="contentfirst">选项卡7的内容</div>

	<div class="contentfirst">选项卡8的内容</div>

</div>

<br>初次打开，如果左下角出现错误提示，请刷新一下页面就正常了，正常使用时不会出现此现象。

<br/>



</body>

</html>

...全文

207 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

山水无言 2011-02-17

打赏
举报

谢谢各位，祝大家元宵节快乐！这几天很忙，等忙好了再来试代码

碧海情天-赵亮 2011-02-16

打赏
举报

[Quote=引用 8 楼 theforever 的回复:]
方便？从各方面都完全谈不到。[/Quote]
之所以这么说，有充分的理由：如果你还不会或没有这样用，那么当你真的好好看完http://blog.csdn.net/theforever/archive/2010/08/23/5832244.aspx 这里后面所说的方法（前面举了一些遍历的烂方法，也指明了它们的弊端），会觉得其实这也很简单明了，当你以后再碰到这样的问题，就很容易会想到采取这样的方法，同样会变成“方便”的方法，而事实上，无论是从解放CPU和内存这些劳动大众，还是从得到的性能提升的效果上来说，它也是真正方便的方法。

碧海情天-赵亮 2011-02-16

打赏
举报

JQ的遍历，书写简洁，是公认的。但没人敢说它这样的效率会好。可以找找JQ使用时需要注意的性能问题看看，比比皆是。好的办法是，对性能影响不大的地方用JQ，对性能有明显影响的地方用原生JS写。所以就算JQ用得出神入化，如果不知道这个，不知道哪里该用哪里不该用，也都算不上程序员。

过于追求性能虽也不必要（比如有人研究代码里用TAB代替空格，或者减少一点空格，是否对加快执行速度有益），但这种在切换对象时是在两个对象间切换还是在众多对象里遍历设置，实在没法说无所谓，是可行，孰不可行，还有什么更糟的方法吗，从这个角度想想，你还真找不出再差的方法来了。

碧海情天-赵亮 2011-02-16

打赏
举报

[Quote=引用 7 楼 charrys 的回复:]
我感觉用遍历的方法更方便些！
http://blog.csdn.net/charrys/archive/2011/02/15/6186319.aspx
[/Quote]
方便？从各方面都完全谈不到。只不过是没好好想想如何实现的时候，比较方便地会想到用这种拙劣的方法。稍微多想一下，就知道有比它好得多的方法。

千里之堤溃于蚁穴。微观的一点点性能浪费，积攒起来就是个事。如果在一个自己常用的库里充斥着带有这样思想的大量代码（量不大是不可能的，因为这样的思想绝对会导致无处不在的这样的结果），对效率的影响是很明显的，尤其是当操作的对象数量变得很多时候，更加明显。

更重要的是，作为程序员，哪怕就是程序爱好者，既然沾程序的边，就得有个程序的思想。现在为什么把程序员叫作IT民工？原因就是很多坐到程序员位置却没有程序员思想的人把程序员这个群体素质拉了分，从工程师拉到民工。

山水无言 2011-02-15

打赏
举报

但是，当点击“选项卡1”至“选项卡8”随便那个选项卡时，每个选项卡都会与下面的内容无缝连接。

汉尼拔 2011-02-15

打赏
举报

在ie6.0和ff和chrome中跑了二下,第二下包了一个div,没有出现缝隙,怎...?

86y 2011-02-15

打赏
举报

我感觉用遍历的方法更方便些！
http://blog.csdn.net/charrys/archive/2011/02/15/6186319.aspx

碧海情天-赵亮 2011-02-15

打赏
举报

是否有问题，取决于外层的DIV是否有margin,padding等增加边距的设置。如果没有的话，表现正常。但加上margin:100px;的话你就看到不正常了。

上面说的display:inline;的方法，不太好，失去块元素的作用了。margin也就失效了。

去掉这个display:inline;，可以在JS里调用鼠标经过事件，即
_tab.mouseover(function() {
_index = _tab.index(this);
$(this).addClass('tabin').siblings().removeClass('tabin');
_con.filter(':visible').stop(true, true).fadeOut(1,
function() {
_con.eq(_index).fadeIn(1)
})
});
_tab.eq(0).mouseover();

下面HTML代码里也有些可以不要的class设置。

反正总体而言，无论是HTML还是利用JQ的切换代码，都有些不必要的或效率不高的代码,把个挺简单的事情弄得挺乱。看我发的那个文章就够用了。

86y 2011-02-15

打赏
举报

有问题吗？我怎么觉得正常！

碧海情天-赵亮 2011-02-15

打赏
举报

外层DIV的CSS里加一条：display:inline;

<div style="margin:20px;display:inline;">
<ul id="theTab">
<li class="tabin">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
<li>选项卡4</li>
<li>选项卡5</li>
<li>选项卡6</li>
<li>选项卡7</li>
<li>选项卡8</li>
</ul>
<div id="tab_box">
<div class="theContent contentin">选项卡1的内容</div>
<div class="theContent">选项卡2的内容</div>
<div class="theContent">选项卡3的内容</div>
<div class="theContent">选项卡4的内容</div>
<div class="theContent">选项卡5的内容</div>
<div class="theContent">选项卡6的内容</div>
<div class="theContent">选项卡7的内容</div>
<div class="theContent">选项卡8的内容</div>
</div>
<br>初次打开，如果左下角出现错误提示，请刷新一下页面就正常了，正常使用时不会出现此现象。
<br/>
</div>

碧海情天-赵亮 2011-02-15

打赏
举报

如果解决这个问题本身，它是CSS问题，发在JS版块不对题了，应发在HTML/CSS版块。

其实这种效果，代码都很简单，根本不必为此加载几十K的JQ库，你所说的需要刷新，也就是因为加载慢的问题。

而且这里使用JQ的代码，$(this).addClass('tabin').siblings().removeClass('tabin');　效率其实很不好。

下面这个文章专门讲这个问题的，比较几种方法，其中最后两个都可以拿来用，也很简单明了
http://blog.csdn.net/theforever/archive/2010/08/23/5832244.aspx