为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/Tab选项卡切换效果

小白关于一个tab选项切换的问题

这是我的HTML代码

    <div class="Login_title" id="title">
                <a href="#" class="active">安全登录</a>
                <a href="#">账号登录</a>
    </div>


   <div id="tab">
                 <!--切换-->
                 <div class="hide">
                     <div class="form">
                        <div class="user_box">
                            <div class="text_search">
                                <input type="text" value="邮箱/会员/手机账号" class="w_input">
                            </div>
                        </div>
                        <div class="pws_box">
                            <div class="password_search">
                                <input type="password" class="w_input">
                                <span class="txt">请输入密码</span>
                            </div>   
                        </div>
                        <div class="info_box clearfix">
                            <div class="info_left fl">
                                <input type="checkbox" checked="checked">
                                <span>记住我</span>
                            </div>
                            <div class="info_right fr">
                                <a href="#">忘记密码</a>
                            </div>
                        </div>
                        <div class="w_btn ">
                            <a href="#">登录</a>
                        </div>
                    </div>
                     <div class="text_reg">
                         <span class="hr">还没有微博?<a href="#">立即注册</a></span>
                         <div class="icon">
                            <span>其它登录方式：</span>
                            <span class="icon_a"><a href="#" class="a_taobao"></a><a href="#" a class="a_qq"></a><a href="#" class="a_uc"></a></span>
                         </div>
                     </div>
                 </div>
                 <div class="block">
                     <div class="img">
                         <div class="img_white">
                              <img src="imgaes/gen.png">
                              <p>请打开微博客户端“扫一扫”</p>
                         </div>
                         <p class="hr_p">还没有微博?<a href="#">立即注册</a></p>
                     </div>
                 </div>
             </div>

   怎么实现点击登录第一个a显示block  点击第二个a显示hide ？title 可以获取id然后再找到里面的a   下面的tab用js怎么找到里面的hide 和block？小白请赐教，不甚感激

前端林小白

2016-03-13

源自：Tab选项卡切换效果

关注问题 我要回答
871
操作
收起

正在回答

2 回答

display_none 回答被采纳 +3 积分
2016-03-24

 <style type="text/css">
      /*
     标签和文本结合区域效果制作：
     1.用ul做分类标签
     2.把ul的display定义为block使ul区域和下面div区域结合在一起
     3.给ul定义一个下边框或者给div内容区域定义一个上边框
     4.所有li标签默认样式不设下边框，作为激活显示的li标签加宽其#fff（白色）
     区域的下边框，覆盖。
     */  
    *{margin:0px;
      padding:0px;
      font:12px normal;
      font-family:微软雅黑;
      }       
    #tabs{width:290px;
          height:150px;
          padding:5px;
          margin:20px;
          }
    #tabs ul{
        list-style:none;
        display:block;
        height:30px;
        line-height:30px;
        border-bottom:2px solid saddlebrown;
        }
    #tabs ul li{float:left;
                width:60px;
                height:28px;
                line-height:28px;
                text-align:center;
                display:inline-block;
                margin:0px 3px;
                border:1px solid #aaa;
                border-bottom:none;
                cursor:pointer;
                background:#fff;
                list-style:none;
                }
    #tabs ul li.on{border-top:3px solid saddlebrown;
                   border-bottom:2px solid #fff;
                   }
    #tabs div{height:120px;
              line-height:25px;
              border:1px solid #336699;
              border-top:none;
              padding:5px;
              }
    .hide{display:none;}   
    </style>
    <script type="text/javascript">     

    window.onload=function(){
        var oTab = document.getElementById("tabs")
        var li = document.getElementsByTagName("li");
        var div = oTab.getElementsByTagName("div");
        //oTabs.get...是为了定义className作用对象为id为tabs下的所有文本div
        
        for(var i=0;i<li.length;i++){//获取所有i编号的元素
            li[i].index=i;  //定义一个index属性对li进行编号
            li[i].onclick = function(){//再注册一个点击事件，当点击的时候所有标签都恢复最初状态
            for(var n=0;n<li.length;n++){//这步是相对于未被点击部分的样式
                li[n].className = "";
                div[n].className = "hide";
            }
            this.className = "on";//再对点击事件添加相应的属性
            div[this.index].className = "";//通过之前的index编号绑定的指定div
            }
        }
    }
    
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
<div id="tabs">
    <ul>
        <li class="on">房产</li>
        <li>家具</li>
        <li>二手房</li>
    </ul>
    <div>
    275万购昌平邻铁三居 总价20万买一居<br/>
    200万内购五环三居 140万安家东三环<br/>
    北京首现零首付楼盘 53万购东5环50平<br/>
    京楼盘直降5000 中信府 公园楼王现房<br/>
    </div>
    <div class="hide">
     40平出租屋大改造 美少女的混搭小窝<br/>
     经典清新简欧爱家 90平老房焕发新生<br/>
     新中式的酷色温情 66平撞色活泼家居<br/>
     瓷砖就像选好老婆 卫生间烟道的设计<br/>
    </div>
    <div class="hide">
     通州豪华3居260万 二环稀缺2居250w甩<br/>
     西3环通透2居290万 130万2居限量抢购<br/>
     黄城根小学学区仅260万 121平70万抛!<br/>
     独家别墅280万 苏州桥2居优惠价248万<br/>
    </div>
</div>

参考这个

1 回复 有任何疑惑可以回复我~
收起回答
#1

前端林小白 提问者

非常感谢！
2016-03-24 回复 有任何疑惑可以回复我~
#2

前端林小白 提问者

这个懂了，不过能否讲下怎么随意获取html里的元素 会获取id 会获取id里的特点元素 不懂的就是如果要获取一个id里的其中一个class为abc 的div ，要怎么去获取？
2016-03-24 回复 有任何疑惑可以回复我~
#3

display_none 回复 前端林小白 提问者

这个的话纯JS我不知道哦，但是jQuery可以轻松获取
2016-03-25 回复 有任何疑惑可以回复我~
#4

前端林小白 提问者 回复 display_none

js有点难学
2016-03-25 回复 有任何疑惑可以回复我~
查看1条回复
qq_大寒_2
2016-03-13

是不是这个意思？

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
window.onload = function()
{
var aA = document.getElementsByTagName('a')[0];
var aA2= document.getElementsByTagName('a')[1];
var oBlock = document.getElementById('block');
var oHide = document.getElementById('hide');

aA.onclick = function(){
oBlock.style.display='block';
};
aA2.onclick = function(){
oHide.style.display='none';
 };
};
</script>
</head>
<body>
    <div class="Login_title" id="title">
                <a href="javascript:;" class="active">安全登录</a>
                <a href="javascript:;">账号登录</a>
    </div>
   <div id="tab">
                 <!--切换-->
                 <div id="hide" class="hide" >
                    1111
                 </div>
                 <div id="block"class="block" style="display:none">
                    2222
             </div>
</body>
</html>


2 回复 有任何疑惑可以回复我~
收起回答
#1

前端林小白 提问者

大致是这样的，不过用tagname 获取的好像是全部的a 如果这样获取到id title 后 ，怎么把里面的a 取出来？
2016-03-14 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
Tab选项卡切换效果
  • 参与学习       65462    人
  • 解答问题       581    个

本课程详细介绍网页页面中最流行常用的tab切换效果

进入课程

本课相似问答

2 回答Tab选项卡切换 延迟效果

2 回答选项卡切换问题？

3 回答选项卡切换问题

1 回答Tab选项卡切换我遇到了三个问题，求大神解答，谢谢

2 回答选项卡切换
搜索更多本课相关问答

小白关于一个tab选项切换的问题

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号