Question

我试图在点击时使用show div。但First One工作正常但不是第二个。

 <script type="text/livescript">
    function showDiv() {
      div = document.getElementById('change_pass');
      div.style.display = "block";
    }

function showDiv1() {    
      div = document.getElementById('invite-friend_now');
      div.style.display = "block";
    }
 </script>

使用链接onclick：

<a href="#" onclick="javascript:showDiv();">Change Password</a>

<a href="#" onclick="javascript:showDiv1();">Invite Friend</a>

单击“更改密码”时，该部门会正确弹出。但是，当我们点击邀请朋友链接时，页面会转到顶部，网址只显示www.example.com/#。（....仅限#

Answer 1

您可以传递一些参数以仅使用一个函数。此外，您可以使用preventDefault()阻止页面向上滚动：

<script type="text/livescript">
    function showDiv(e, divName) {
      div = document.getElementById(divName);
      div.style.display = "block";
      e.preventDefault();
    }
</script>

<a href="#" onclick="showDiv(event, 'change_pass');">Change Password</a>

<a href="#" onclick="showDiv(event, 'invite-friend_now');">Invite Friend</a>

另外，请检查此invite-friend_now ID，因为我认为您可能拼错了它。

Answer 2

我认为通过这种方式使用jQuery会更容易：

<button id="show_div">show div</button>
<div id="To_be_shown" style="display: none;"><p>some text</p></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
  $("#show_div").click(function () {
    $("#To_be_shown").fadeIn(100);
  });  
</script>

第二个显示Div功能不起作用

2 个答案: