Question

好的，我的网站顶部菜单中有一个链接列表，每个链接都在一个类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;
}

Answer 1

你想要实现的目标，可以这样做。

创建单独的班级.active

.active
{
    border:none;
}

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

请参阅fiddle

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

Answer 3

请使用当前页面的类。

：仅当您点击链接时才有效 - 这样链接现在就处于活动状态..

Answer 4

您可以使用border:none;。来解决您的问题

Answer 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

将其添加到该元素

Answer 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

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

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

7 个答案: