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

Posted 2023-03-06

【中文标题】一种在选择后保持链接粗体的方法（与 a:visited 不同）

【英文标题】：A way to keep a link bold once selected (not the same as 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"  /></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框架？

【参考方案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。