求教下~如何用jq代码实现如题描述效果,望大神指教

穿山甲死前说 发布于 2016/06/03 16:10
阅读 194
收藏 0

请问如何实现点击上面的a标签下面的两个DIV显示内容,求问下,第一个对应第一个盒子,第二个对应第二个。请大神帮帮忙~

<div class="nav_text_right">
        <div class="right_top">
          <a id="btn1" class="active" href="javascript://">手机登录</a>
          <a id="btn2" href="javascript://">账号登录</a>
        </div>
        <div class="right_text">
          <span class="input_box">
              <i class="input_I1"></i><input class="input_l" type="text" name="" id="" placeholder="请输入手机号" />
          </span>
          <span class="input_box">
              <i class="input_I2"></i><input class="input_s" type="text" name="" id="" placeholder="输入验证码" /><button>获取验证码</button>
          </span>
          <input class="input_btn" type="button" value="登录" />
        </div>
        <div class="login_box">
          <span class="input_box">
              <i></i><input class="input_l" type="text" name="" id="" placeholder="请输入手机号" />
          </span>
          <span class="input_box">
              <i></i><input class="input_l" type="password" name="" id="" placeholder="请输入密码" />
          </span>
          <input class="input_btn" type="button" value="登录" />
        </div>
      </div>




加载中
0
littledew
littledew
<div class="nav_text_right">
    <div class="right_top">
        <a id="btn1" class="active" href="javascript://">手机登录</a>
        <a id="btn2" href="javascript://">账号登录</a>
    </div>
    <ul class="lgin_content">
        <li>
            <div class="right_text log_box">

          			<span class="input_box">
              				<i class="input_I1"></i>
					<input class="input_l" type="text" name="" id="" placeholder="请输入手机号"/>
          			</span>
          			<span class="input_box">
              				<i class="input_I2"></i>
					<input class="input_s" type="text" name="" id="" placeholder="输入验证码"/>					<button>
                        获取验证码
                    </button>
          			</span>
                <input class="input_btn" type="button" value="登录"/>
            </div>
        </li>
        <li>
            <div class="login_box">
          			<span class="input_box">
              				<i></i>
					<input class="input_l" type="text" name="" id="" placeholder="请输入手机号"/>
         			</span>
          			<span class="input_box">
              				<i></i>
						<input class="input_l" type="password" name="" id="" placeholder="请输入密码"/>
          			</span>
                <input class="input_btn" type="button" value="登录"/>
            </div>
        </li>
    </ul>
</div>


$(".right_top").find("a").click(function(){ 
        $(".lgin_content").find("li").eq($(this).index()).show().siblings().hide();
});
littledew
littledew
回复 @穿山甲死前说 : 第一次用插入代码 怎么总是不好看。。。。
穿山甲死前说
穿山甲死前说
我去查查eq和siblings的用法,还是api接触的太少了,我刚才自己鼓捣出来了,谢谢大神
0
WolfX
WolfX

这个很简单啊...

控制显示和隐藏

最好别用a,用a的话href="javascript:void(0);"

$(function(){
          $("#btn1").on("click",function(){
            $(".right_text").show();
            $(".login_box").hide();
          });
          $("#btn2").on("click",function(){
            $(".right_text").hide();
            $(".login_box").show();
          });
        });



穿山甲死前说
穿山甲死前说
谢谢你,我刚自己鼓捣出来了,还给a元素加了背景颜色,嘿嘿,谢谢大神
0
穿山甲死前说
穿山甲死前说

引用来自“WolfX”的评论

这个很简单啊...

控制显示和隐藏

最好别用a,用a的话href="javascript:void(0);"

$(function(){
          $("#btn1").on("click",function(){
            $(".right_text").show();
            $(".login_box").hide();
          });
          $("#btn2").on("click",function(){
            $(".right_text").hide();
            $(".login_box").show();
          });
        });



<script>
        $(function(){
          var btn1 = $('#btn1');
          var btn2 = $('#btn2');

          btn1.click(function(){
            $('.login_box').css('display','none');
            $('.right_text').show()
            $(btn2).removeClass('active');
            $(this).addClass('active')

          });
          btn2.click(function(){
            $('.right_text').hide();
            $('.login_box').show()
            $(this).addClass('active');
            $(btn1).removeClass('active')
          });
        })
      </script>
这段代码能够优化么?active是我写进去点亮a的北京



返回顶部
顶部