删除包含活动链接的 div 的边框答案

【问题标题】：remove the border of div containing the active link删除包含活动链接的 div 的边框
【发布时间】：2013-03-14 14:42:25
【问题描述】：

好的，我的网站顶部菜单中有一个链接列表，每个链接都位于类 div 中。我想将活动链接（当前页面）的边框设置为无；但是我的代码好像有些问题！

顶部菜单链接

<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/general';?>" >General</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/contact';?>" >Contact</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Relations';?>" >Relations</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Work';?>" >Work</a></div>

我的 CSS：

.emp_details_link{
  border:1px solid #000000;
  width:100px;
  height:20px;
  float:left;
}
.emp_details_link a{
  text-decoration:none;
}
.emp_details_link > a:active{ // poiting to the parent div
  border:1px solid red;
  border-bottom:none;
}

【问题讨论】：

没有一个链接有active类
解决方案是将active类添加到div.emp_details_link而不是锚元素
我还建议您研究 jQuery，因为我发现它更易于使用，但是，您在查看时会遇到未启用 javascript 的人。
但我认为 active 是链接的状态，而不是类名或类似的东西！
Arun active 不是类它是一个状态：active 处于活动位置或打开的链接位置

标签： html css

【解决方案1】：

你想达到的，可以这样实现。

创建一个单独的类.active

.active
{
    border:none;
}

并通过 jQuery/javascript 将其应用于您单击的锚点（并从前一个中删除）：

见fiddle

【讨论】：

【解决方案2】：

您需要 Jquery 来解决这个问题，使用一些类作为活动链接并使用 jquery 删除活动类这是一个方法示例如下

脚本

$('.emp_details_link a').on('click',function(){
   $('div').removeClass('active');
   $(this).parent().addClass('active');
});

PHP

<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/general';?>" >General</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/contact';?>" >Contact</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Relations';?>" >Relations</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Work';?>" >Work</a></div>

css

.emp_details_link{
  border:1px solid #000000;
  width:100px;
  height:20px;
  float:left;
}
.emp_details_link a{
  text-decoration:none;
}
.emp_details_link > a:active{ // poiting to the parent div
  border:1px solid red;
  border-bottom:none;
}
.active
{
    border:none;
}

另一种不使用jquery的方法，是直接使用适当页面中的类，就像我现在假设联系人是活动页面

css

.emp_details_link{
  border:1px solid #000000;
  width:100px;
  height:20px;
  float:left;
}
.emp_details_link a{
  text-decoration:none;
}
.emp_details_link > a:active{ // poiting to the parent div
  border:1px solid red;
  border-bottom:none;
}
.active
{
    border:none;
}

php

<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/general';?>" >General</a></div>
<div class="emp_details_link active"><a href="<?php echo base_url().'index.php/hr/employee_details/contact';?>" >Contact</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Relations';?>" >Relations</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Work';?>" >Work</a></div>

【讨论】：

它工作得很好，但它只适用一秒钟，直到链接打开，然后它回到第一个状态，在你的代码中第二个链接被激活！！
你必须在每个页面中为 ex 放置活动类更改，如果你想激活一般链接，你必须删除 active in contact 并添加一般：
一般
我也给出了另一个答案

【解决方案3】：

改为使用当前页面的类。

:active 仅在您单击链接时才起作用 - 因此链接现在处于活动状态..

【讨论】：

【解决方案4】：

你可以使用border:none;。它会解决你的问题

【讨论】：

【解决方案5】：

目前无法在 CSS 中选择元素的父级。

给a 加边框，这样它就可以移除自己的样式

.emp_details_link{

  width:100px;
  height:20px;
  float:left;
}
.emp_details_link a{
  text-decoration:none;
  border:1px solid #000000;
}
.emp_details_link a:active{
  border:1px solid red;
  border-bottom:none;
    // something like this
}

或者为此创建一个单独的类，并使用JS将其添加到该元素中

【讨论】：

【解决方案6】：

给a 标签而不是div 提供主边框

.emp_details_link{  
  width:100px;
  height:20px;
  float:left;
}
.emp_details_link a{
  text-decoration:none; border:1px solid #000000; display:block
} 
.emp_details_link > a:active{ // poiting to the parent div
  border:1px solid red;
  border-bottom:none;
}

DEMO

【讨论】：

【解决方案7】：

如果你有包含所有页面的链接文件，请像这样

一般

<?php
$general='active';
include('link.php');
?>

联系

<?php
$contact='active';
include('link.php');
?>

链接

<div class="emp_details_link <?php if(isset($general)) echo $general;?>"><a href="<?php echo base_url().'index.php/hr/employee_details/general';?>" >General</a></div>
<div class="emp_details_link <?php if(isset($contact)) echo $contact;?>"><a href="<?php echo base_url().'index.php/hr/employee_details/contact';?>" >Contact</a></div>
<div class="emp_details_link <?php if(isset($Relations)) echo $Relations;?>"><a href="<?php echo base_url().'index.php/hr/employee_details/Relations';?>" >Relations</a></div>
<div class="emp_details_link <?php if(isset($Work)) echo $Work;?>"><a href="<?php echo base_url().'index.php/hr/employee_details/Work';?>" >Work</a></div>

【讨论】：