更新一個簡單的jQuery/CSS代碼

我希望有人能幫助我解決這個簡單的問題：我剛開始學習jQuery並找到一個代碼，在選擇一個項目後顯示隱藏文本。我想，這樣來更新它：。更新一個簡單的jQuery/CSS代碼

一）選中的項目大膽

B）我可以添加佔位符文本而不是一個空白隱藏出發的文本字段

我愚蠢地認爲我可以通過解決一）：在CSS活躍的房地產，但只工作只要點擊鏈接即可。（只要你釋放鼠標按鈕它不見了。）就像b。），這可能只有通過使用jQuery以及？如果是這樣，如果你能告訴我如何解決這個問題真的很棒。 :)

$(document).ready(function(){ 
    $("#nav a").click(function(){ 
     var id = $(this).attr('id'); 
     id = id.split('_'); 
     $("#menu_container div").hide(); 
     $("#menu_container #menu_"+id[1]).show(); 
    }); 
});

CSS

#menu_container { 
width: 650px; 
height: auto; 
padding-left: 30px; 
} 
#menu_container div { 
display:none; 
}

HTML

<div id='nav'> 
    <a id="show_apps">Appetizers</a> | <a id="show_soups">Soups and Salads</a> | <a id="show_entrees">Entrees</a> 
</div> 

<div id="menu_container"> 
    <div id="menu_apps"> 
    Content of the App Section Here 
    </div> 
    <div id="menu_soups"> 
    Content of the Soups Section Here 
    </div> 
    <div id="menu_entrees"> 
    Content of the Entrees Section Here 
    </div> 
</div>

來源

2016-01-01 TimVanGorp

我在代碼中找不到任何文本字段？ –

你可能會考慮這一點，讓它做你的沉重感你已經使用jquery http://jqueryui.com/tabs/ – Bindrid

我在代碼中添加了一些額外的行，您可以從這裏查看http://jsfiddle.net/KUtY5/483/。

你大膽這樣

$("#nav a").css("font-weight", 400); // First you make them thin 
$(this).css("font-weight", 800); // Than you make them bold

你把佔位這樣

<div id="placeholder"> 
    Placeholder 
</div> 
$("#placeholder").hide();

在另一方面，我建議你不要隱藏菜單容器。而隱藏menu_container中的元素。所以你可以在菜單容器中放置一個plcaeholder，你可以隱藏它。

來源

2016-01-01 23:46:02

非常感謝你的時間！偉大的作品:) – TimVanGorp

@TimVanGorp不客氣:)。如果你能接受這個解決方案，我將不勝感激:) –

Updated fiddle

可以使用例如自定義類bold和下面的代碼實現一）：

CSS

.bold{ font-weight: bold;}

$(this).addClass('bold').siblings('a').removeClass('bold');

對於b）我在代碼中找不到任何文本字段。

希望這會有所幫助。

來源

2016-01-01 23:38:25

謝謝Zakaria！ – TimVanGorp

算出這個2個問題必須要問/解決

你怎麼通常加粗文字在頁面上... CSS吧？
你想在哪裏定義這些樣式？有2個地方：

a。你可以在javascript中定義它。

b。你可以通過普通的方法（inline，external，embedded）在項目css中定義它。

有什麼區別？如果你在javascript裏面定義它的代碼是自包含。我的意思是，你可以將JS代碼從一個項目複製/粘貼到下一個項目中，而不需要擔心從樣式表或其他源複製相關樣式，因爲它們都在你編寫的JQuery中。

相反，如果您在常規位置的JavaScript之外定義它，代碼可能不是自包含的，但有些人發現在特定項目的範圍內管理更容易，因爲所有的css都包含在一個位置（外部典型的樣式表）。

如果你想利用選項，看到.css() method

如果你想利用選項B，看到style manipulation（尤其是切換類）

注意，在上述引用的例子應該讓你90％的理解方式。

一些最後的話。學習Jquery，但我建議你儘可能遠離它，因爲它實現DOM抖動而不是DOM緩存（sizzle引擎）。

This video series將簡要地進入jQuery的原因爲吸在第一視頻性能和該系列的其餘部分是關於如何創建模塊化香草JS。

JQuery返回並在每次需要進行更改時都會搜索DOM，而這正是 $.(*element*)正在執行的操作，而不僅僅是緩存它。

的節點越多，你有DOM中更多的處理能力用於搜索（因爲它要經過整個樹）。

然後對你有更多的元素來更改頂部（比方說，如果你使用一個CSS類選擇器），你必須在最重要的是增加更多的處理。

這一切是好的，如果你是一個桌面上，但對於移動平臺？你從哪裏得到這種處理能力？......它不存在。

來源

2016-01-02 00:04:22

非常感謝你提供有用的建議和明確的文檔Matthew，我真的很感謝你花時間發佈這個。希望你有一個美好的新的一年:) – TimVanGorp

沒問題，這裏的希望你能儘快得到香草JS。 –

更新一個簡單的jQuery/CSS代碼

回答

相關問題