一种在选择后保持链接粗体的方法（与 a:visited 不同）答案

【问题标题】：A way to keep a link bold once selected (not the same as a:visited)一种在选择后保持链接粗体的方法（与 a:visited 不同）
【发布时间】：2011-04-09 20:26:56
【问题描述】：

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

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

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

这是我的 CSS

div#newboxes1，div#newboxes2，div#newboxes3 { 边框：1px纯黑色；背景颜色：#CCCCCC；显示：无；填充：5px；宽度：659px； } div#newboxes1 { 显示：块； } ol#toc { 高度：2em；列表样式：无；边距：0；填充：0；边框：无； } ol#toc li { 向左飘浮; } ol#toc li a img { 边框：无； } ol#toc { 颜色：#676767；向左飘浮; 行高：2em；文字装饰：无； } ol#toc li.current { 背景颜色：#e5e5e4；背景位置：0 -60px； } ol#toc li.current a { 颜色：#676767； } ol#toc li.current a:hover { 颜色：#fff; 字体粗细：粗体； } div.内容{ 背景：#e6e5e4；填充：20px；宽度：669px；边距：0px； } div.content a { 颜色：#000000；文字装饰：下划线； } div.content a：活动 { 字体粗细：粗体； } div.content a: 已访问 { 字体粗细：粗体； }

这是我的 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';
              }
        }
  }

}

感谢您的帮助 :) 特蕾莎

【问题讨论】：

你试过a:active吗？
你用的是哪个JS框架？

标签： javascript html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

是的，只需修改您的 Javascript 以添加或删除一个类。将该类定义为文本粗体粗体或正常。

【讨论】：

【解决方案3】：

CSS 选择器:active 会做到这一点。用法同:hover。

【讨论】：

【解决方案4】：

使用类似这样的 jquery 可能会起作用。您可以在相关位置将“.css”替换为“.addClass('class')”和“.removeClass('class')”。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $('ol#foo li').click(function() {
        $('ol#foo li').css('font-weight','normal');                   
        $(this).css('font-weight','bold');
    });
});


// or:

$(document).ready(function()
{
    $('ol#foo li').click(function() {
        $('ol#foo li').removeClass('active');             
        $(this).addClass('active')
    });
});

 </script>

应该注意 - 其中“active”是你的 CSS 类来设置 LI 的样式。 ol#foo 是你的 OL。

【讨论】：