求大神指点 HTML tab切换

stableman 发布于 2014/03/24 12:37
阅读 2K+
收藏 0

想在一个网页上实现多个tab标签页,点击即可切换,试了无数次都无法实现想要的效果,谷歌搜了N多,改了不下百次,还是没找到原因,求指点,不甚感激!

想要实现的效果:四个tab标签页,默认显示第一个tab的内容,鼠标点击tab标签则可以切换到相应的tab标签页


网页代码大致如下


CSS.....


<script language="JavaScript" type="text/javascript">
    function ChangeDiv(divId,divName,zDivCount)
    {
     for(i=1;i<=zDivCount;i++)
     {
        document.getElementById(divName+i).style.display="none";
     }
        document.getElementById(divName+divId).style.display="";
    }
</script>




<div id="zd-tabs">
    <ul>
        <li><a href="#zd-tab1" class="zd-a"><span onclick="JavaScript:ChangeDiv('1','zd-tab',4)">a</span></a></li>
        <li><a href="#zd-tab2" class="zd-b"><span onclick="JavaScript:ChangeDiv('2','zd-tab',4)">b</span></a></li>
        <li><a href="#zd-tab3" class="zd-c"><span onclick="JavaScript:ChangeDiv('3','zd-tab',4)">c</span></a></li>
        <li style="margin-right: 0px ! important;">
            <a href="#zd-tab4" class="zd-d"><span onclick="JavaScript:ChangeDiv('4','zd-tab',4)">d</span></a></li>
    </ul>
</div>


<table class="zd-box" border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td class="zd-box" id="zd-tabpanels">

    <div class="zd-a zd-tabpanel" id="zd-tab1">
    <ul><li>内容1</li></ul>
    </div>

    <div class="zd-b zd-tabpanel" id="zd-tab2">
    <ul><li>内容2</li></ul>
    </div>

    <div class="zd-c zd-tabpanel" id="zd-tab3">
    <ul><li>内容3</li></ul>
    </div>

    <div class="zd-d zd-tabpanel" id="zd-tab4">
    <ul><li>内容4</li></ul>
    </div>

            </td>
        </tr>
    </tbody>
</table>





加载中
0
ththththht
ththththht
你想要什么效果嘛。。。。。
stableman
stableman
默认显示第一个tab页的内容 ,点击其他tab则可以切换到其他tab页的内容
0
stableman
stableman

我参照网上的 这样写 就可以切换  但带CSS的则无法切换,真心求指点



<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
@charset "utf-8";
</style>
<html>
<head>
<script language="JavaScript" type="text/javascript">
    function ChangeDiv(divId,divName,zDivCount)
    {
     for(i=1;i<=zDivCount;i++)
     {
        document.getElementById(divName+i).style.display="none";
     }
        document.getElementById(divName+divId).style.display="";
    }
</script>
</head>
<body>

<span onclick="JavaScript:ChangeDiv('1','zd-tab',4)">内容一</span>
<span onclick="JavaScript:ChangeDiv('2','zd-tab',4)">内容二</span>
<span onclick="JavaScript:ChangeDiv('3','zd-tab',4)">内容三</span>
<span onclick="JavaScript:ChangeDiv('4','zd-tab',4)">内容四</span>


<div id="zd-tab1" style="margin:10px;">内容部分第1区</div>
<div id="zd-tab2" style="display:none;margin:10px;">内容部分第2区</div>
<div id="zd-tab3" style="display:none;margin:10px;">内容部分第3区</div>
<div id="zd-tab4" style="display:none;margin:10px;">内容部分第4区</div>



</body>
</html>

ththththht
ththththht
回复 @stableman : 2721844407
stableman
stableman
回复 @Infinity : 方便告诉一下Q么?
ththththht
ththththht
带CSS不行就把CSS贴出来呀。。
0
赵亮-碧海情天
赵亮-碧海情天

别再看这样差劲的代码例子了,跟着学都会学傻的。

去学下JQ。

赵亮-碧海情天
赵亮-碧海情天
回复 @stableman : 看你向每个参与者都回复了,很有心。授人以鱼,不如授人以渔。希望我的话对你以后的学习能真起到作用,多主动去系统地学习一下。
stableman
stableman
@赵亮-碧海情天 谢谢啦!楼上帮忙解决了
赵亮-碧海情天
赵亮-碧海情天
回复 @stableman : 如果只是怕麻烦,我可以用更舒服的理由。但我也是从不会过来的,很理解你,更想真正帮到你,那就是让你明白:想干这一行,最需要具备的就是吃苦的精神和独立的能力。不要指望别人太多帮你,那不现实,只会耽误你踏踏实实地去钻研。
stableman
stableman
请问能私下指点一下吗?
0
ksc
ksc

 我写的一个插件 jquery_slide 这里demo 


stableman
stableman
谢谢啦!楼上帮忙解决了
0
-Jw-
-Jw-
想清楚原理 其實就是display 先把css樣式寫好了 就幾本ok了
0
巴顿
巴顿

其实就是这样 

A,B,C,D分别对应内容a,b,c,d.

对于A,B,C,D选定情况为蓝色,用CSS控制。

那么一开始的时候,控制A为蓝色,内容a显示,其他的b,c,d隐藏。

如果选定B,就将B设为蓝色,将其他的A,C,D设为红色,然后将b显示,将a,cd隐藏。


可以通过学习jquery+css很简单就可以实现。

stableman
stableman
谢谢啦!楼上帮忙解决了