点击后如何使css a：active工作？答案

【问题标题】：How to make css a:active work after the click?点击后如何使css a：active工作？
【发布时间】：2019-04-25 07:21:54
【问题描述】：

我正在尝试将菜单设置为选项卡。选项卡本身工作正常，菜单链接也很棒。但我想删除活动选项卡的底部边框，让它看起来像你在那个实际页面上。我试过使用#id a:active，但它似乎只有在我按下链接时才有效。我也有过用javascript来做的想法，但我似乎无法找到一种方法来做到这一点。这是我的活动 CSS。

CSS：（如果您需要更多我的 CSS，请告诉我）

#navigation a:active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

谢谢， /Pyracell

【问题讨论】：

感谢大家的帮助。现在使用一个类作为我的菜单 ID 并使用如下链接解决了问题：<a <?php if($_GET['page'] == 'sale') { ?> class='active' <?php } ?> href="index.php?page=sale" ><span> Salg </span></a> 再次感谢所有 /Pyracell

标签： css

【解决方案1】：

选择选项卡链接时添加和删除类..

#navigation .active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

并使用脚本（jQuery 版本）

$(function(){

    $('#navigation a').click(function(){

        $('#navigation .active').removeClass('active'); // remove the class from the currently selected
        $(this).addClass('active'); // add the class to the newly clicked link

    });

});

【讨论】：

你应该提到，为了使用这个脚本，他/她必须导入jQuery库。
@Dan，绝对正确.. OP 在问题中提到了 javascript，我将其解释为 jQuery ..
我试图把它放到我的 menu.php 中（我从我的索引端包含菜单，这取决于它是管理员还是用户登录）。我将该函数放入与此<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 匹配的脚本中。这是正确的还是？ /Pyracell
@Pyracell 是的，但请确保关闭脚本标记，并在将脚本代码插入答案之前导入 jQuery。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script type='text/javascript'>/*your JavaScript code goes here*/</script>不推荐使用 language="javascript" 标记。请改用 type='text/javascript'
现在我的代码看起来像这样（仍然无法正常工作：/）：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#navigation a').click(function(){ $('#navigation .active').removeClass('active'); // remove the class from the currently selected $(this).addClass('active'); // add the class to the newly clicked link }); }); </script>

【解决方案2】：

从另一个答案的 cmets 中的演示链接中，JavaScript 不会有任何帮助，它应该在您的 PHP 代码中完成。类似于：

<a <?php if (this_tab_is_selected){ ?>class='active' <?php } ?>href='LINK_TO_TAB' >
    TAB_NAME
</a>

提及更改选项卡正在重定向到另一个页面可能有助于从一开始就获得更好的响应 xD

根据您的代码和创建选项卡的方式，您需要将this_tab_is_selected 更改为返回所选选项卡的true 的代码。

附：您仍然需要在您的 CSS 中进行其他答案中提到的修改。（也就是把#navigation a:active改成#navigation a.active）

【讨论】：

【解决方案3】：

使用 JavaScript (jQuery) 的粗略方法

  $('a[href]').each(function() {
    if ($(this).attr('href') == window.location.pathname || $(this).attr('href') == window.location.href)
      $(this).addClass('active');
  });

【讨论】：

这是我们为旧系统的 UI 增添趣味的方法，效果很好。（我们没有使用“active”来避免与“active”伪类的任何潜在冲突）

【解决方案4】：

你是如何实现标签的；作为多个不同的 HTML 页面？ :active 伪类确实只适用于链接处于“活动”状态，这通常意味着“被点击”。如果您将选项卡实现为多个 HTML 页面，您可能希望将“CurrentTab”之类的 CSS 类分配给代表用户当前所在页面的选项卡，并将您的 border-bottom-width:0px 应用于该类。

【讨论】：

【解决方案5】：

通常遵循的做法是将类应用于您当前选择的选项卡，例如class="selected" 然后修改你的css来定位那个类

#navigation a.selected

【讨论】：

强烈同意 Jags。这不仅是最简单的方法，而且也是在禁用 JavaScript 时避免通过 JavaScript 方法显示当前页面失败的方法。还有一件事：在导航栏中引用的每个 .html 页面中，删除与当前页面关联的列表项周围的锚标记。当人们无所事事地点击当前页面的导航栏项时，这会阻止服务器执行不必要的页面刷新。

【解决方案6】：

这不是它的工作方式。 :active 选择器匹配（如您所见）当前被点击的链接（= 处于活动状态/工作状态）。您想要的是活动页面的选择器。您将需要在那里使用普通的 css 类，如下所示：

#navigation a:active, #navigation a.active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

【讨论】：

【解决方案7】：

这样的事情需要通过使用 PHP 等代码的 if 语句来完成。

例如，如果你点击一个链接，你会得到你的新页面，设置一个页面变量，比如：

$page = "Home";

然后使用 if 语句添加或删除额外的 CSS 类/ID 以更改样式，例如

if ($page == "home")
{
  <a href="home.php" class="active">Home</a>
  <a href="about.php">About</a>
}
else if ($page == "About")
{
  <a href="home.php">Home</a>
  <a href="about.php" class="active">About</a>
}

【讨论】：

【解决方案8】：

我参加聚会有点晚了，但我有一个仅使用 css 的简单答案。给每个页面一个唯一的 id，给每个菜单项一个唯一的 id（在这种情况下是类），当你不在页面上时，为你的链接设置样式，然后如果你在页面上，你可以根据需要设置它们的样式.当您单击菜单项并加载页面时，css 匹配。因此，无论您在哪个页面上，菜单项都会显示为“活动”。下面我将它放在当前页面菜单按钮文本更改颜色的位置，但您可以使用 visible 属性来显示和隐藏图像或使用任何 css 对其进行样式设置。（同样在这个例子中，css 也可以改变悬停时的内容。）此外，这个方法允许你为每个菜单按钮编写单独的 css，所以如果你愿意，每个菜单按钮都可以做不同的事情。

#menu {
  padding-top: .5em;
  text-align: center;
  font-family: 'Merriweather Sans';
  font-size: 1.25em;
  letter-spacing: 0;
  font-weight: 300;
  color: #003300;
 }
#menu a {
  text-decoration: none;
  color: #003300;
}
#menu a:visited {
  color: #003300;
}
#menu a:hover {
  font-style: italic;
}

#home a.home, 
#about a.about,
#edc a.edc,
#presentations a.presentations,
#store a.store,
#contact a.contact {
  font-weight: 800;
  color: #660000;
}
#home a.home:hover,
#about a.about:hover,
#edc a.edc:hover,
#presentations a.presentations:hover,
#store a.store:hover,
#contact a.contact:hover
{
  font-style: normal;
}

【讨论】：