使用BootStrap 3導航欄項目時如何在HTML中顯示div內容

Question

我正在使用BootStrap 3 CSS樣式，並創建了以下內容：

<div class="navbar-header">
    <button type="button" class="navbar navbar-default" role="navigation">
        <span class="sr-only">Toggle navigation></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button> 
    <a class="navbar-brand" href="#home">Home</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
                <ul class="nav navbar-nav">
                       <li><a href="#mywork" onclick="return show_div('mywork');">My Work</a></li>
                       <li><a href="#myprofile">Profile</a></li>
                       <li class="dropdown">
                           <a href="#other" data-toggle="dropdown" class="dropdown-toggle">Other actions <b class="caret"></b></a>
                           <ul class="dropdown-menu">
                               <li><a href="#contactme">Contact Me</a></li>
                           </ul>
                       </li>
                </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                                <a href="#actions" data-toggle="dropdown" class="dropdown-toggle">Actions <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#updateprofile">Update profile</a></li>
                                    <li><a href="#logout">Logout</a></li>
                                </ul>
                        </li>
                </ul>
        </div>
</div>

<div id="home" style="display: none;">
    Test Data
</div>

然后，我試圖在底部顯示div，該div給出了ID“ home”，它對應於導航欄上給出的#home href。

我遇到的麻煩是，當單擊導航欄的Home元素時，無法顯示帶有id的div，這是我做錯了還是有人可以將我指向正確的方向？ 我花了很多時間來解決這個問題，但是不能。

編輯：

JavaScript show_div函數：

<script>
    //Functon to show divs from the nav menu
    function show_div(toShow)
    {
        var show = document.getElementById(toShow);
        show.style.display = "";
    }
</script>

Answer 1

您的錨點onclick事件發送了錯誤的ID

<li><a href="#mywork" onclick="return show_div('mywork');">My Work</a></li>

它應該寄home ，將您的測試數據定位到div標簽：

<div id="home" style="display: none;">
    Test Data
</div>

將onclick更改為：

<li><a href="#mywork" onclick="show_div('home');">My Work</a></li>

我希望這有幫助。 編碼愉快！

Answer 2

為什么不想這樣使用jQuery：

<a id="sh" style="cursor:pointer">Show Home</a>
<div id="home" style="display: none;">Test Data</div>

<script type="text\javascript">
$(document).ready(function () {
    $("#sh").click(function () {
        $("#home").toggle();
    });
});
</script>