Question

这是我到目前为止，一个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">

编辑包含更多详细信息，例如被问及

Answer 1

这可以通过jquery toggle（）轻松完成

<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>

这是有效的代码。：）

Answer 2

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

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。

Answer 3

我会选择这样的东西：

<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

编辑：定义newpost和Newprofile后必须包含Javascript：如果在div1内定义了div2和toggle，则无效。但是当在外部定义时（由于它只执行一次就更有效），它在页面加载时执行。

页面从上到下加载，因此当使用div1和div2到达行时，解析器将搜索newpost和NewProfile，这些内容未定义非常时刻，在这些元素出现之前加载js文件。这意味着他找不到它们，div1和div2为undefined，这就是为什么toggle无效。

更充分地在页面底部加载js文件可以确保用户的视觉延迟更少。

Answer 4

以下代码隐藏/显示两个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>

Answer 5

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

单击按钮时会显示一个可见的div隐藏和不可见的div隐藏？

5 个答案: