javascript - 一种在选择后保持链接粗体的方法(与 :visited) 不同

Question

我正在创建一个“常见问题解答”页面，该页面顶部(链接)有一个问题列表，答案显示在下面。

点击每个问题会显示相应的答案(使用显示/隐藏 div)。我的问题是:有没有办法让点击的问题/链接加粗？并使其保持粗体直到单击另一个问题，在这种情况下，新单击的问题将变为粗体，之前单击的问题将恢复正常。

我曾尝试在 CSS 中使用 a:active，但尽管这会使文本在单击时变为粗体，但一旦您松开鼠标，它就会恢复正常。

这是我的CSS

    div#newboxes1, div#newboxes2, div#newboxes3
{
 border: 1px solid black;
 background-color: #CCCCCC;
 display: none;
 padding: 5px;
 width: 659px;
}

div#newboxes1 {
display:block;

}

ol#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
 border: none;
}

ol#toc li {
    float: left;
}

ol#toc li a img
{
 border: none;
}

ol#toc a {
    color: #676767;
    float: left;
    line-height: 2em;
    text-decoration: none;
}

ol#toc li.current {
    background-color: #e5e5e4;
    background-position: 0 -60px;
}

ol#toc li.current a {
    color: #676767;
}

ol#toc li.current a:hover {
    color: #fff;
    font-weight: bold;
}

div.content {
    background: #e6e5e4;
    padding: 20px;
 width: 669px;
 margin: 0px;
}

div.content a
{
 color: #000000;
 text-decoration: underline;
}

div.content a:active
{
 font-weight: bold;
}

div.content a:visited
{
 font-weight: bold;
}

This is my HTML

<ol id="toc"><li class="current"><a href="customer-service_delivery.html"><img src="delivery_0.jpg" alt="Delivery" /></a></li>
<li><a href="customer-service_returns.html"><img src="returns.jpg" /></a></li>
<li><a href="customer-service_contact.html"><img src="contact.jpg" /></a></li>
<li><a href="customer-service_shopping.html"><img src="shopping.jpg" /></a></li></ol>
<div class="content">
<p><a name="newboxes" href="javascript:showonlyone('newboxes1');" >Where is my order?    </a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes2');" >UK Standard Delivery</a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes3');" >UK Next Day Delivery</a></p>
<div name="newboxes" id="newboxes1">
  <p>Where is my order answer</p>
  </div>
<div name="newboxes" id="newboxes2">
  <p>UK Standard Delivery answer</p>
  </div>

单击每个链接时调用 Javascript 函数，这会显示/隐藏当前位于彼此之上的相关 div。

下面是javascript

function showonlyone(thechosenone) {
  var newboxes = document.getElementsByTagName("div");
        for(var x=0; x<newboxes.length; x++) {
              name = newboxes[x].getAttribute("name");
              if (name == 'newboxes') {
                    if (newboxes[x].id == thechosenone) {
                    newboxes[x].style.display = 'block';
              }
              else {
                    newboxes[x].style.display = 'none';
              }
        }
  }

感谢您的帮助:) 特蕾莎

Answer 1

您必须将此样式添加到您的 css 文件中:

ol#toc li.current a:active {
    font-weight: bold;
}