Question

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

<style type="text/css">
.cur {
color:#f60;
border-bottom:1px solid #fff;
font-weight:bold;
background:#fff;
cursor:default;
}
#tab_ {
float:left;
width:300px;
}
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_ {
clear:left;
}
#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})</script>
</body>

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

//另外请高手帮优化一下代码，把一些无效的代码删除掉

//另外代码中不要用position:absolute

Answer 1

主要是样式处理的问题吧！
用别的处理的，行不？

追问

也可以，但最好是帮把这个改正了，我喜欢这样的显示效果

追答

看h4和div是一个隔一个的，js这样写问题不大，关键是显示内容一时，两个h4中间多了个div，导致换行。看有没css的人过来处理下！

Answer 2

你把这一句注释掉你就知道是什么原因了？

//tab("tab_",{n:2})

追问

但不会修正啊，如果你会，请帮助，谢谢！

追答

我已经给你重新布局，并在不改变你要实现的效果的前提下。按照我的思维方式来编写了，这样好处理得多~~

.cur {
color:#f60;
border-bottom:1px solid #fff;
font-weight:bold;
background:#fff;
cursor:default;
}
#tab_ {
float:left;
width:500px;
}
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:;
}
#tab_ {
clear:left;
}
#tab_1.cur {
color:#f60
}
#tab_2.cur {
color:#f60
}

选择卡一
选择卡二
选择卡三
选择卡四
内容1
内容2
内容3
内容4

function Lkwtab(obj,num){
var p=document.getElementById(obj).childNodes;
var Arr=[];
var Brr=[];
var a=0,b=0;
for(var i=0;i

是不是该给兄弟我多加一点分啊，我可以花了好长时间啊！嘿嘿~~

追问

您好，你的这段代码在火狐浏览器下无效，请帮优化一下，谢谢！

追答

.cur {
color:#f60;
border-bottom:1px solid #fff;
font-weight:bold;
background:#fff;
cursor:default;
}
#tab_ {
float:left;
width:500px;
}
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:;
}
#tab_ {
clear:left;
}
#tab_1.cur {
color:#f60
}
#tab_2.cur {
color:#f60
}

选择卡一
选择卡二
选择卡三
选择卡四
内容1
内容2
内容3
内容4

function Lkwtab(obj,num){
var p=document.getElementById(obj).childNodes;
var Arr=[];
var Brr=[];
var a=0,b=0;
for(var i=0;i

不好意思，由于昨晚很晚了，也比较困，编程的时候只在IE下测试，现在应该可以了！多给俺加点分啊？

追问

不好意思，还有一个问题
.c {
top:21px;
border:1px solid #ccc;
left:0;
width:510px;
在这下面加入
height:220px;
后能控制切换介面的高度，但是当内容超过高度后，多余部份就不能显示，如果既能默认高度，又能当内容超过默认高度又能完全显示，就是框自动往下撑

谢谢！

追答

你IE之中应该是会自动撑开的!
而在FF之中有可能不会撑开!
你可以改成以下看看:
.c {
top:21px;
border:1px solid #ccc;
left:0;
width:510px;
_height:220px;
min-height:220px;