做一個可見的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隱藏和一個不可見的單擊按鈕時出現？

回答

相關問題