做一个可见的div隐藏和一个不可见的单击按钮时出现？

-3

这是我到目前为止，一个div默认可见，另一个隐藏。但是，当我点击按钮时，它们一起出现/消失。我究竟做错了什么？做一个可见的div隐藏和一个不可见的单击按钮时出现？

var hideprofiles = function() { 
var mydiv = document.getElementById('newpost'); 
if (mydiv.style.display === 'block' || mydiv.style.display === '') 
    mydiv.style.display = 'none'; 
else 
    mydiv.style.display = 'block'

}

var showprofiles = function() { 
var mydiv2 = document.getElementById('NewProfile'); 
if (mydiv2.style.display === 'block' || mydiv2.style.display === '') 
    mydiv2.style.display = 'none'; 
else 
    mydiv2.style.display = 'block'

}

<div id="newpost2">asdf</div> 
    <input type="submit" value="btn" onclick="hideprofiles(); showprofiles(); "></input> 

<div id="newpost"> 
    <table class="full_width_table" cellspacing="0"> 
     <tr> 
      <td id="currentprofile">Current Profile:</td> 
      <td id="selectcurrentprofile"> 
       <select> 
        <option value="train_manager">Train Manager</option> 
       </select> 
      </td> 
      <td>&nbsp;</td> 
      <td id="company">Company:</td> 

      <td id="selectcompany"> 
       <select> 
        <option value="XC">XC</option> 
       </select> 
      </td> 
      <td>&nbsp; &nbsp; &nbsp;</td> 
      <td> 
       <a data-rel="dialog" data-role="button" data-position-to="window" data-mini="false" 
        data-include-close-btn="false" href="dialogs/new_UserProfile.html" id="createbutton">Create</a> 
      </td> 

     </tr> 
    </table> 
     </div> 

<div id="NewProfile" class="hide_element"> 

     <table class="full_width_table">

编辑，包括一些细节，如被要求

来源

2014-05-21 user3432387

哪里是你'NewProfile'元件？ 'hideprofiles（）'在哪里？显示更多的代码。 – bbuecherl

你的HTML中的NewProfile和Newpost在哪里？ – bbuecherl

用html元素更新 – user3432387

我会去像这样的东西：

<input type="submit" value="btn" onclick="toggle()">

JS：

var toggled = false, 
    div1 = document.getElementById("newpost"), 
    div2 = document.getElementById("NewProfile"), 
    toggle = function() { 
     if(toggled) { 
      div1.style.display = "block"; 
      div2.style.display = "none"; 
     } else { 
      div1.style.display = "none"; 
      div2.style.display = "block"; 
     } 
     toggled = !toggled; 
    };

这应该是最简单，最高效的方式。 example

编辑：的JavaScript必须包含定义newpost和Newprofile后：它不会让时div1和div2，其中内toggle定义的差异。但是，当在外部定义（这是更高性能，因为它只能执行一次），它在页面加载时执行。从顶部到底部

页负载，所以用div1和div2到达线当解析器将搜索newpost和NewProfile，其不在那一刻所定义，当之前这些元素是JS-文件被加载。这意味着他找不到它们，并且div1和div2是undefined这就是为什么toggle不起作用。

Furthurmore在页面底部加载js-files将确保用户的视觉延迟更少。

来源

2014-05-21 10:32:07 bbuecherl

感谢帮助的人，我看到了jsscript及其如何工作，但在我的代码中，按钮不会触发任何事情。我的js在一个不同的班级，可以有所作为吗？这完全像你一样！ – user3432387

使用我的HTML按钮，并将js复制到您的js文件，它应该可以工作。请确保js文件包含在html页面的底部，因此可以找到'newpost'和'NewProfile'。 – bbuecherl

我已经把它放在顶部，将它移到底部，它就起作用了！你的JS链接去哪里有什么不同？我没有想到它！你能向我解释它是如何产生变化的吗？ :) – user3432387

-1

var showprofiles = function() { 
var mydiv2 = document.getElementById('NewProfile'); 
if ($(mydiv2).is(":visible")) 
    $(mydiv2).hide(); 
else 
    $(mydiv2).show(); 
}

来源

2014-05-21 10:18:44

这与OP做的事情基本上是一样的（不太高性能），所以这不会解决问题 – bbuecherl

并且请不要混合使用Jquery和Javascript。 –

这可以用jQuery的切换（）容易

<div id="newpost1">fdgf</div> 
<div id="newpost2">asdf</div> 
<button>Toggle</button> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
</script> 
<script> 
    $(document).ready(function(){ 
    $("#newpost2").hide(); 
    $("button").click(function(){ 
    $("#newpost1").toggle(); 
    $("#newpost2").toggle(); 
    }); 
    }); 
</script>

这是工作代码来完成。 :)

来源

2014-05-21 10:25:47 AeJey

我会指望他们的风格，但设置他们的行为。

function showProfiles(){ 
document.getElementById('newpost').style.display = 'none'; 
document.getElementById('NewProfile').style.display = 'block'; 
} 

function hideProfiles(){ 
document.getElementById('newpost').style.display = 'block'; 
document.getElementById('NewProfile').style.display = 'none'; 
}

这样你保证一次只显示一个div。

来源

2014-05-21 10:28:19

嗨，感谢您的帮助！这种工作，它摆脱了一个，然后显示其他。但是如果我再次按下按钮，那么它不会改回来，需要改变以实现这一点？ :-) – user3432387

以下代码隐藏/显示两个div交替：

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript"> 
      function btnOnclick() { 
       var div; 
       for(var i = 0, ids = ["div1", "div2"], ceiling = 2; i < ceiling; i++) { 
        div = document.getElementById(ids[i]); 
        if(div.style.visibility == "hidden") 
         div.style.visibility = "visible"; 
        else 
         div.style.visibility = "hidden"; 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <input type="button" value="Click me!" onclick="btnOnclick()"/> 
     <div id="div1" style="background-color: #FF0000; height: 50px; width: 50px; visibility: hidden;"></div> 
     <div id="div2" style="background-color: #00FF00; height: 50px; width: 50px; visibility: visible;"></div> 
    </body> 
</html>

来源

2014-05-21 10:32:16 Tom

做一个可见的div隐藏和一个不可见的单击按钮时出现？

回答

相关问题