js高手看过来，这个点击切换选项卡代码为什么点击选项卡1会出错？掉到下边了，点击选项卡2效果正确的

Question

本帖最后由 kwdpx 于 2011-11-27 00:10:00 编辑

Answer 1

<div id="tab_">
  <h4>选择卡一</h4><h4>选择卡二</h4>
  <div class="c">内容1</div>
  
  <div class="c">内容2</div>
</div>
页面结构问题，把页面结构改成上面这样~·你js也得改下~·

Answer 2

同意楼上，补充一下，你选择二时，html是这样的，两个h4等效于相邻了，float:left才有效<div id="tab_">
  <h4 id="tab_1" class="">选择卡一</h4>
  <div class="c" style="display: none; ">内容1</div>
  <h4 class="cur" id="tab_2">选择卡二</h4>
  <div class="c" style="">内容2</div>
</div>
而且选择一时，html是这样的两个h4之间隔了一个div，所以只能前后相排了
<div id="tab_">
  <h4 id="tab_1" class="cur">选择卡一</h4>
  <div class="c" style="">内容1</div>
  <h4 class="" id="tab_2">选择卡二</h4>
  <div class="c" style="display: none; ">内容2</div>
</div>
这样一来你的代码要改改了，不能利用nextSibling机制了，具体的如果上面的代码是你写的就不太难，如果纯粹是找的，那建议你找个全面的ui解决方案吧，这么单独一个的部件没什么用的，后面是我的ide自动+我手动整理的代码。<style type="text/css">
.cur {
color:#f60;
border-bottom:1px solid #fff;
font-weight:bold;
background:#fff;
cursor:default;
}
#tab_ {
float:left;
width:300px;
clear:left;
}
h4 {
float:left;
height:20px;
margin:0 0 0 15px;
display:inline;
line-height:20px;
width:100px;
border:1px solid #ccc;
position:relative;
z-index:11;
text-align:center;
font-weight:normal;
cursor:pointer;
background:#eee;
color:#1870a9
}
.c {
top:21px;
border:1px solid #ccc;
left:0;
width:510px;
padding:5px;
overflow:hidden;
display:block;
}#tab_1.cur {
color:#f60
}
#tab_2.cur {
color:#f60
}
</style><div id="tab_">
  <h4>选择卡一</h4>
  <div class="c">内容1</div>
  <h4>选择卡二</h4>
  <div class="c">内容2</div>
</div><script type="text/javascript">    function id(elem) {
        return document.getElementById(elem)
    }
    function show(elem) {
        elem.style.display = "";
    }
    function hide(elem) {
        elem.style.display = "none";
    }
    function next(elem) {
        do {
            elem = elem.nextSibling;
        } while (elem && elem.nodeType != 1);
        return elem;
    }
    function tab(a, p) {
        var p = (p === undefined) ? { e: "onclick", n: 1 } : p, node = id(a).firstChild, x = []; p.e = (p.e ===undefined) ? "onclick" : p.e; p.n = (p.n === undefined) ? 1 : p.n; node = (node.nodeType!== 1) ? next(node) : node;
        for (var i = 1, node; node; i++, node = next(node)) {
            x[i] = node;
        }
        for (var i = 1; x[i]; i++) {
            if (i % 2 == 0) {
                hide(x[i]); x[i - 1].id = a + (i / 2)
            }
            x[p.n * 2 - 1].className = "cur";
            show(x[p.n * 2]);
            temp = function (i) {
                if (i % 2 == 1) {
                    x[i][p.e] = function () {
                        for (var j = 1; x[j]; j++) {
                            if (j % 2 == 0) {
                                hide(x[j]);
                                x[j - 1].className = "";
                            }
                        }
                        show(x[i + 1]); x[i].className = "cur";
                    }
                } else {
                    return null
                }
            } (i)
        }
    }tab("tab_", { n: 2 });//js高手看过来，这个点击切换选项卡代码为什么点击选项卡1会出错？掉到下边了，点击选项卡2效果正确的//另外请高手帮优化一下代码，把一些无效的代码删除掉//另外代码中不要用position:absolut
</script>
</body>