HTML jQuery按鈕點擊更改段落

我正在製作一個簡單的網站，其上只有文本的主文本窗口。我想有像Home，About，Contact等按鈕。現在，我不想製作about.html，contact.html等，但我寧願只更改文本而不加載新的頁面？（所以感覺更平滑）。HTML jQuery按鈕點擊更改段落

因此，我做了幾段文字適合每個頁面（家庭，關於等），現在有什麼我問你的方式嗎？只需點擊按鈕即可更改段落？還是有沒有簡單的方法做到這一點，而不是使每個頁面的.html文件？

在此先感謝。

來源

2012-12-21 user1880779

你所追求的是使內容替換爲阿賈克斯 – MimiEAM

我會tvanfosson同意並建議像UI選項卡或AJAX加載，但如果你想看到一個非常基本的方式，您可以使用jQuery隱藏/顯示做：

http://jsfiddle.net/ADDPH/7/

HTML

<div id="container"> 
    <ul id="nav"> 
     <li><a href="#" class="index">Index</a></li> 
     <li><a href="#" class="contact">Contact</a></li> 
     <li><a href="#" class="other">Other</a></li> 
    </ul> 
    <div id="content"> 
     <div class="index hide">This is the home page.</div> 
     <div class="contact hide" style="display:none;">This is my contact info.</div> 
     <div class="other hide" style="display:none;">This is other stuff.</div> 
    </div> 
</div>

jQuery的

$("#nav a").click(function() { 
    $(".hide").hide(); // hide other divs, marked with hide class 
    var c = $(this).attr('class').split(' ')[0]; //Get First Class 
    $("#content ."+c).show(); //show anything inside content div with the class c (marked with a . to represent class) 
});

來源

2012-12-21 03:50:51 dewyze

我要澄清一下，我打破了幾個很好的編程技術，儘可能CSS之類的東西去了，但是這是基本的功能。 – dewyze

這就是我想要的！謝謝大家對jqueri UI的建議，我一定會仔細研究它，因爲它看起來很簡單。只要告訴我一件事 - 我需要輸入兩個jqueries然後（到HTML文件）？或者這只是一個修改後的jQuery類型？謝謝！ – user1880779

你可以將數據存儲在內存中（在一個變量或其他東西），然後將click事件綁定到更改div的函數？

來源

2012-12-21 02:43:18

您可能想看看jQuery UI tabs插件，如果您將內容放入內容中，插件將完全按照您的需要進行操作。或者，您可以擁有單獨的內容文件，但可以使用相同的插件通過AJAX加載它們。即使你決定不使用插件，也可以通過類似的方法隱藏頁面加載時除主要「標籤」以外的所有內容，然後在你的div上使用適當的hrefs在你的按鈕上的錨點，以確定哪些標籤顯示。

jQuery UI accordion是另一種處理每頁多個內容節的方法。

來源

2012-12-21 02:50:06 tvanfosson

ü se jQuery Ui Tabs和 jQuery UI Accordion。

用jQuery UI手風琴很容易。

jQuery UI Accordion

jQuery Ui Tabs

來源

2012-12-21 04:09:18