显示的文本和粗体选中的链接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

回答

相关问题