Question

我想打开一个易趣商店，我需要帮助才能使用HTML和CSS（而不是JavaScript）为我的插入创建图形。

更具体地说，我想创建一个带有<ul></ul>的菜单，其中包含“描述”，“送货”等。按“说明”链接，我会看到一些文字出现，“描述”标签将变为粗体，然后如果我点击“运送”菜单，前一个文字就会消失，另一个文字出现。我能够使用: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

如何将这些效果合二为一？

Answer 1

使用javascript更容易做到这一点。

这是您的HTML 我添加了两个名为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

文本显示和粗体选择链接CSS

1 个答案: