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

下面代码是从网上找到的，用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>

解决方案 »

  1.   

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

  2.   

    如果解决这个问题本身，它是CSS问题，发在JS版块不对题了，应发在HTML/CSS版块。其实这种效果，代码都很简单，根本不必为此加载几十K的JQ库，你所说的需要刷新，也就是因为加载慢的问题。而且这里使用JQ的代码，$(this).addClass('tabin').siblings().removeClass('tabin');　效率其实很不好。下面这个文章专门讲这个问题的，比较几种方法，其中最后两个都可以拿来用，也很简单明了
    http://blog.csdn.net/theforever/archive/2010/08/23/5832244.aspx
      

  3.   

    外层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>
      

  4.   

    是否有问题，取决于外层的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的切换代码，都有些不必要的或效率不高的代码,把个挺简单的事情弄得挺乱。看我发的那个文章就够用了。
      

  5.   

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

  6.   

    JQ的遍历，书写简洁，是公认的。但没人敢说它这样的效率会好。可以找找JQ使用时需要注意的性能问题看看，比比皆是。好的办法是，对性能影响不大的地方用JQ，对性能有明显影响的地方用原生JS写。所以就算JQ用得出神入化，如果不知道这个，不知道哪里该用哪里不该用，也都算不上程序员。过于追求性能虽也不必要（比如有人研究代码里用TAB代替空格，或者减少一点空格，是否对加快执行速度有益），但这种在切换对象时是在两个对象间切换还是在众多对象里遍历设置，实在没法说无所谓，是可行，孰不可行，还有什么更糟的方法吗，从这个角度想想，你还真找不出再差的方法来了。
      

  7.   

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