Question

我在登录框中使用了login dropdown box的引导片段之一，有一个Join Us的链接我希望当我点击加入我们时，框中的内容应该被替换为另一个包含登录凭据的框

我修改了以下代码

New here ? <a href="#"><b>Join Us</b></a>

使用以下代码

New here ? <a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show()"><b>Join Us</b></a>

并创建了另一个ID为signup-dp的内容

<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>

现在，当我点击加入我们链接时，页面的网址会被更改，即网址末尾的#signup，但内容不会显示，任何人都可以告诉你该怎么做

Answer 1

请检查是否包含jquery。

使用return false，如下所示

<a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show(); return false;"><b>Join Us</b></a>

#signup-dp{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show(); return false;"><b>Join Us</b></a>
<div id="login-dp">login-dp</div>
<div id="signup-dp">signup-dp</div>

Answer 2

首先，为了养成良好的编程习惯，你必须绑定click事件，而不是在标签onClick属性中编写javascript代码。

<a href="#" id="btn_join_us"><b>Join Us</b></a>

在您的javascript代码中（尝试在其他js文件中编写代码而不是HTML页面中的内联代码。）

$(document).ready(function(){
    $("#btn_join_us").click(function(e){
        e.preventDefault();
        $('#login-dp').hide(); 
        $('#signup-dp').show();
        return false;
    });
});

这种代码会产生一些安全的事件绑定。否则任何人都可以从inspect元素更改你的代码并执行它。

Answer 3

它很简单，你的代码只对我有用。

<a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show()">    
    <b>Join Us</b>
</a>
<a href="#" onClick="$('#login-dp').show(); $('#signup-dp').hide()">
    <b>Login</b>
</a>
<ul id="signup-dp" class="dropdown-menu">
    // signup data Inside this part
</ul>
<ul id="login-dp" class="dropdown-menu">
    // login data Inside this part
</ul>

请点击此链接。 JSfiddle

Answer 4

您的代码是正确的。但请检查是否包含了jquery文件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

这个jquery应该包含在你编写的jquery代码之前。

使用以下jquery代码使最初隐藏的注册div。

<script type="text/javascript">
    $(document).ready(function(){
        $("#signup-dp").hide();
    }); 
</script>

Answer 5

Onclick jQuery无效，所以用户Javascript代码

New here ? <a href="#" onclick='document.getElementById("login-dp").style.display = "none";document.getElementById("signup-dp").style.display = "visible";'><b>Join Us</b></a>

Answer 6

将新隐藏元素放在现有元素之前的某处。除非您在$(document).ready();中将jQuery代码写入单独的文件或内部。

使用onclick替换另一个内容

6 个答案: