Question

我正在尝试将菜单作为标签使用。标签本身工作正常，菜单链接也很棒..但我想删除活动标签的buttom边框，使它看起来像你在那个实际的页面上。我尝试过使用#id a:active，但只要按下链接，它似乎就有用了。我已经通过javascript做了这件事，但我似乎无法找到一种方法来做到这一点。这是我的css for active。

CSS :(如果您需要更多我的CSS，请告诉我）

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

谢谢， / Pyracell

Answer 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

    });

});

Answer 2

从另一个答案的评论中的演示链接，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的代码。

P.S。您仍需要在CSS中的其他答案中进行修改。（将#navigation a:active更改为#navigation a.active）

Answer 3

使用JavaScript（jQuery）执行此操作的粗略方法

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

Answer 4

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

Answer 5

通常遵循的做法是将类应用于当前选定的选项卡，例如。 class =“selected”然后修改你的css以定位该类

#navigation a.selected

Answer 6

这不是它的工作原理。：活动选择器匹配（如您所注意到的）当前被点击的链接（=处于活动/工作状态）。您想要的是活动页面的选择器。你需要在那里使用普通的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;
}

Answer 7

这样的事情需要使用if语句使用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>
}

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

如何使css a：点击后活动工作？

8 个答案: