| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 710 人关注过本帖
标题:滑门-切换效果 大家看一下!!!
只看楼主 加入收藏
ztslove
Rank: 1
来 自:北京
等 级:新手上路
帖 子:19
专家分:7
注 册:2010-5-27
结帖率:83.33%
收藏
已结贴  问题点数:20 回复次数:5 
滑门-切换效果 大家看一下!!!
我是新手 下面的代码是下午刚写的一个简单的切换效果 可是在测试的时候 点击选择一  选择二 什么的  都可以  就是 下面的 层 显示出来后 就不能隐藏了  大家帮忙看下是哪里出现了 问题 我的是IE6 谢谢  了····
程序代码:
<style type="text/css">
<!--
    #d{
           
        text-align:center;
        color:#FF0000;
        padding:5;
        background:#009900;
        border:2px  solid #FF00FF    ;
        width:420;
        height:150;
        align:center;
    }
    #d div{
        display:none;
    }
    #d .d1{
        display:block;
    }
    #d .up{
         color:#33FF00;
    }
    #d div{   
          margin-top:50;
          color:#ffffff;
          background-color:#669900;
          height:100
    }
    #d h2{
          float:left;
          width:100px;
          height:30px;
          line-height:25px;    
          over-flow:hidden
          text-align:center;
    }

 -->
</style>


<div id="d">

<h2 onClick="go_to(1)" >选择一</h2>
<h2  onClick="go_to(2)">选择二</h2>
<h2  onClick="go_to(3)">选择三</h2>
<h2  onClick="go_to(4)">选择四</h2>

<div class="d1">1111111</div>
<div>2222222</div>
<div>33333333</div>
<div>4444444</div>

</div>

<script language="javascript">
function go_to(ao)
  {
     var h=document.getElementById("d").getElementsByTagName("h2");
     var d=document.getElementById("d").getElementsByTagName("div");

  for(var i=0;i<h.length;i++)
    {
       if(ao-1==i)
    {
        d[i].className+="d1";
        h[i].className+="up";
   
    }else
   
    {
        h[i].className+=" ";
        d[i].className+=" ";    
   
    }

 
  }
}


</script>

搜索更多相关主题的帖子: 效果 
2010-06-15 18:16
ztslove
Rank: 1
来 自:北京
等 级:新手上路
帖 子:19
专家分:7
注 册:2010-5-27
收藏
得分:0 
没人回 啊 怎么     ····帮帮忙··谢谢了 ·
2010-06-19 19:09
奥林巴斯
Rank: 2
等 级:论坛游民
威 望:1
帖 子:3
专家分:14
注 册:2010-6-21
收藏
得分:0 
你的写法本身就有问题,我是在你基础之上修改的,如下
<style type="text/css">
<!--
    #d{
           
        text-align:center;
        color:#FF0000;
        padding:5;
        background:#009900;
        border:2px  solid #FF00FF    ;
        width:420;
        height:150;
        align:center;
    }
    #d div{
        display:none;
    }
    #d .d1{
        display:block;
    }
    #d .up{
         color:#33FF00;
    }
    #d div{   
          margin-top:50;
          color:#ffffff;
          background-color:#669900;
          height:100
    }
    #d h2{
          float:left;
          width:100px;
          height:30px;
          line-height:25px;   
          over-flow:hidden
          text-align:center;
    }
-->
</style>


<div id="d">

<h2 onClick="go_to(1)" >选择一</h2>
<h2  onClick="go_to(2)">选择二</h2>
<h2  onClick="go_to(3)">选择三</h2>
<h2  onClick="go_to(4)">选择四</h2>

<div class="d1">1111111</div>
<div>2222222</div>
<div>33333333</div>
<div>4444444</div>

</div>

<script language="javascript">
function go_to(ao)
  {
     var h=document.getElementById("d").getElementsByTagName("h2");
     var d=document.getElementById("d").getElementsByTagName("div");

  for(var i=0;i<h.length;i++)
         d[i].className="";
      h[i].className="";
    {
       if(ao-1==i)
    {
        d[i].className+="d1";
        h[i].className+="up";
   
    }else
   
    {
        h[i].className+=" ";
        d[i].className+=" ";   
   
    }

  }
}


</script>
2010-06-21 16:18
ztslove
Rank: 1
来 自:北京
等 级:新手上路
帖 子:19
专家分:7
注 册:2010-5-27
收藏
得分:0 
  谢谢啊    不过 还是 不行啊  不能切换  了直接···
2010-06-22 16:18
poyexyp
Rank: 4
等 级:业余侠客
威 望:1
帖 子:27
专家分:205
注 册:2010-6-23
收藏
得分:20 
额,不知道要的具体是什么效果,如果是每次点击显示相同index的div的话,在script里面改class的时候不能写成+=,写成赋值=就行了,+=是其本身再加上赋值内容,条件判断的else里等于是无用的。
改成    if(ao-1==i)
    {
        d[i].className="d1";
        h[i].className="up";
   
    }else
   
    {
        h[i].className=" ";
        d[i].className=" ";   
   
    }

或者更简单点:d[i].className=ao-1==i?"d1":"";
    h[i].className=ao-1==i?"up":"";
这样就不用写好几行的if了。

ps:样式表里的overflow写错了,没有-
2010-06-23 11:20
ztslove
Rank: 1
来 自:北京
等 级:新手上路
帖 子:19
专家分:7
注 册:2010-5-27
收藏
得分:0 
真是谢谢  你啊   可以了   就是多写了一个  “+” 呵呵   能交个朋友吗 ?我的QQ:396362666  我还剩下 15个分怎么 给你结贴啊 ?
2010-06-25 09:02
快速回复:滑门-切换效果 大家看一下!!!
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.015525 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved