Javascript函数重叠

Javascript functions overlapping

本文关键字：重叠 函数 Javascript      更新时间：2023-09-26

我有两个函数，当单击链接时，会出现一个框。

<div class='buttons'><a href  = '#' onclick = "return false" onmousedown =     "javascript:toggleInteractlogin('login')"class='regular' name='save'> Log In </div></a>
<div class='buttons'><a href  = '#'  onclick = "return false" onmousedown =     "javascript:toggleInteractlogin('register')" class='regular' name='save'>            Register</div></a><br><br>
<div class = "Interactlogin" id = "login"> Login</div>
<div class = "Interactlogin" id = "register"> Logina</div>

当点击登录时，登录框会向下滑动，但当点击注册框时，登录盒会进一步滑动以容纳注册框，而我希望一次只显示一个框。感谢您的帮助。

function toggleInteractlogin(x)
   {
   if($('#' + x).is(":hidden"))
   {
   $('#'+x).slideDown(200);
   }
   else
   {
   $('#'+x).hide();
   }
   $('Interactlogin').hide();

   }

我已经在现场演示-JSFiddler中更新了解决方案

HTML

<div class='buttons'>
    <a id="btnlogin" href= '#' class='login' name='save'>Log In </a>
</div>
<div class='buttons'>
    <a id="btnregister" href='#' class='regular' name='save'>Register</a>
</div><br><br>
<div class="Interactlogin" id="login" style="display:none">Login</div>
<div class="Interactlogin" id="register" style="display:none">Logina</div>​

JS

    $('#btnlogin').click(function(){
        $('#login').show();
        $('#register').hide();
    });
    $('#btnregister').click(function(){
        $('#login').hide();
        $('#register').show();
    });    
​

请确保在单击登录按钮时首先向上滑动注册框，类似地，确保在单击注册按钮时先向上滑动登录按钮因此，对于登录按钮，请单击

1向上滑动寄存器盒

2然后滑下登录框

类似于寄存器

1滑上登录框

2，然后滑下寄存器盒

尝试指定不同的id登录&注册按钮

function toggleInteractlogin(x)
   {
     if(x=='register')
        {
            $('#login').hide();
            $('#register').show();
        }
        else
        {
            $('#register').hide();
            $('#login').show();
        }
   }

对于显示/隐藏，您也可以指定不同的效果，如淡入/淡出

您可以使用这个修订后的标记来简化它：

<div class='buttons'><a href='#' class='login'>Log In</a></div>
<div class='buttons'><a href='#' class='register'>Register</a></div>
<br><br> 
<div class = "Interactlogin" id = "login">Login</div>
<div class = "Interactlogin" id = "register">Logina</div>
$('.login,.register').mousedown(function() {
    $('.Interactlogin').hide();//hide them all initially
    var myType = $(this).attr('class');//assumption this is the only class
    $('#' + myType).slideDown(200);
});

我假设这个CSS最初隐藏：（你的可能不同）

.Interactlogin{display:none;}
相关文章：