删除包含活动链接

确定div的边界，我有我自己的网站的顶部菜单他们每个人的一类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; 
}

来源

2013-03-14 goseo

没有联系的有类'active' – 2013-03-14 05:23:48

该解决方案将是对类'active'添加到'div.emp_details_link'而不是锚点元素 – 2013-03-14 05:24:34

我也建议寻找jQuery，因为我发现这更容易使用，但是，您面对的人在查看时没有启用javascript。 – 2013-03-14 05:25:02

你需要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-14 05:55:18

它的工作很好，但它只适用于一秒，直到链接打开，然后它回到第一个状态，在你的代码中第二个链接变得活跃起来！ – goseo 2013-03-14 06:13:53

你必须把主动类的变化放在每个页面为前如果你想活跃的一般链接，你必须删除活跃的接触和添加一般：

General

– 2013-03-14 06:30:12

我给了另一个答案看起来太 – 2013-03-14 06:43:15

你想达到什么，可以做这种方式。

创建一个单独的类.active

.active 
{ 
    border:none; 
}

并将其应用到你点击，通过的jQuery/JavaScript的锚（和前一个删除）：

看到fiddle

来源

2013-03-14 05:27:06

使用改为当前页面的类。

：当你点击链接活跃只会工作 - 这样的链接现在是活动..

来源

2013-03-14 05:27:36

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

来源

2013-03-14 05:28:07 PSR

目前还没有办法选择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-14 05:33:01

给主边界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

来源

2013-03-14 06:24:13 Sowmya

如果已经包括链接文件的所有页面遵循这样

一般

<?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-14 06:42:25

删除包含活动链接

回答

相关问题