顯示的文本和粗體選中的鏈接CSS

我想打開一個eBay商店，我需要幫助爲我的插入使用HTML和CSS（而不是JavaScript）創建圖形。顯示的文本和粗體選中的鏈接CSS

更具體地說，我想用「Description」，「Shipping」等創建一個帶有<ul></ul>的菜單。通過按下「Description」鏈接，我會看到一些文本出現，「Description」標籤將變爲粗體，然後if我點擊「發貨」菜單上的文字消失，另一個文本出現。我能夠使用:target單獨做每一件事情的兩個不同的CSS樣式：

代碼1：

#menu_descrizione:target{ 
 
    font-weight: bold; 
 
} 
 

 
#menu_spedizione:target{ 
 
    font-weight: bold; 
 
}

<a id="menu_descrizione" href="#menu_descrizione">Descrizione</a> 
 
<a id="menu_spedizione" href="#menu_spedizione">Spedizione</a>

代碼2：

#descrizione, #spedizione{ 
 
    display: none; 
 
} 
 

 
#descrizione:target{ 
 
    display: block; 
 
} 
 

 
#spedizione:target{ 
 
    display: block; 
 
}

<a href="#descrizione">Descrizione</a> 
 
<a href="#spedizione">Spedizione</a> 
 

 
<p id="descrizione">Questa è una descrizione</p> 
 
<p id="spedizione">Questa è una spedizione</p>

Fiddle1
Fiddle2

我怎樣才能團結，這些影響到一個？

來源

2017-07-26 AlexQualcosa

雖然dippas提供了一個答案，我建議你嘗試推出這個功能與JavaScript。這是它的目的，如果你的網站變得更加複雜，或者你真的想用數據做些什麼 –

@JackParkinson謝謝你，我可以在哪裏找到dippas的答案？ – AlexQualcosa

哦，它似乎已被刪除 - 看起來也許這不是一個好的答案。 –

用javascript來做這件事更容易。

這是你的HTML 我添加了2個類叫做btn。

<a href="#descrizione" class="btn">Descrizione</a> 
<a href="#spedizione" class="btn">Spedizione</a> 

<p id="descrizione">Questa è una descrizione</p> 
<p id="spedizione">Questa è una spedizione</p>

這是你的CSS

#descrizione, #spedizione{ 
    display: none; 
} 

#descrizione:target{ 
    display: block; 
}

這裏是一些jQuery的

$(".btn").click(function(){ 
    $(this).css("font-weight","bold"); 
    $(".btn").not(this).css("font-weight","normal"); 
})

而且here is an example

來源

2017-07-26 14:00:19

非常感謝！ – AlexQualcosa

顯示的文本和粗體選中的鏈接CSS

回答

相關問題