1

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

7 回答 7

2

你想要达到的，可以通过这种方式完成。

创建一个单独的类.active

.active
{
    border:none;
}

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

见小提琴

于 2013-03-14T05:27:06.500 回答
1

您需要 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>
于 2013-03-14T05:55:18.880 回答
0

改为使用当前页面的类。

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

于 2013-03-14T05:27:36.720 回答
0

您可以使用border:none;.it 将解决您的问题

于 2013-03-14T05:28:07.097 回答
0

目前没有办法在 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

于 2013-03-14T05:33:01.673 回答
0

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

演示

于 2013-03-14T06:24:13.710 回答
0

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

一般的

<?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>
于 2013-03-14T06:42:25.143 回答