我如何使用JavaScript的菜單，動態地改變網站

好了，所以我有這樣的我如何使用JavaScript的菜單，動態地改變網站

<a id="page1" onclick="page1" href="">Home</a> 
    <a id="page2" onclick="page2" href="">About us</a> 
    <a id="page3" onclick="page3" href="">Services</a> 
    <a id="page4" onclick="page4" href="">Partners</a> 
    <a id="page5" onclick="page5" href="">Contact us</a>

而且因爲我有一個HTML文件的工作菜單上的內容，需要JavaScript的是，如果page1 onclick然後顯示此部分，但不顯示page2，page3，page4，page5。

由於我在JavaScript中可怕的最好的我能拿出是;

<script> 
var one = document.getElementById('page1'); 
if (page1 == page1){ 
    document.write("<html> psuedo html code goes here</html>"); 
} 
</script>

希望你們能幫上忙。謝謝你的好意

來源

2016-08-24 Tim Marshall

您可能需要爲這些鏈接添加網址，然後研究如何使用ajax將內容加載到您的網頁中，但按照現狀，您需要付出更多努力，因爲問題對此太寬論壇 – Pete

我希望我理解你的權利，這是你想要的東西：

https://jsfiddle.net/0zv9d302/1/

$(document).on('click', '.navigation a', function(e){ 
    e.preventDefault(); 
    var section = $(this).attr("id"); 
    $(".content div").each(function(){ 
    if($(this).attr("class") == section){ 
     $(this).show(); 
    } else { 
     $(this).hide(); 
    } 
    }) 
});

這僅僅是一個快速的方法，你可以怎麼用jQuery做。我也想告訴你一種使用Bootstrap Framework的方法，只需要給我更多的時間。

編輯

在這裏你去引導這樣做：

<div class="container"> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">About us</a></li> 
    <li><a data-toggle="tab" href="#menu2">Services</a></li> 
    <li><a data-toggle="tab" href="#menu3">Partners</a></li> 
    <li><a data-toggle="tab" href="#menu4">Contact us</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     <h3>Home</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     <h3>About us</h3> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     <h3>Services</h3> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
    </div> 
    <div id="menu3" class="tab-pane fade"> 
     <h3>Partners</h3> 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
    </div> 
    <div id="menu4" class="tab-pane fade"> 
     <h3>Contact us</h3> 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
    </div> 
    </div> 
</div>

https://jsfiddle.net/0zv9d302/2/

你甚至都不需要額外的Javascript/jQuery的，如果你有引導庫。

來源

2016-08-24 15:14:22

完美我可以做這個工作非常感謝你！ –

@TimMarshall沒問題的人。請接受這個答案作爲解決方案，並給它一個「向上箭頭」，如果它幫助你:)謝謝 –

我如何使用JavaScript的菜單，動態地改變網站

回答

相關問題