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;
}