remove the border of div containing the active link - html

Question

Ok, I have a list of links in my top menu of my website that each of them is inside a class div. I want to set the border of the active link(current page) to none; but I seem to have some problems in the code!
the top menu links
<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>
my 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

what you want to achieve, can be done this way.
create a separate class .active
.active
{
border:none;
}
and apply it to the anchor that you clicked, through jQuery/javascript ( and remove from the previous one):
see fiddle

Answer 2

You need Jquery to solve this problem, use some class for active link and use jquery for remove the active class this is one method example is following
Script
$('.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;
}
and another method with out using jquery, is directly use the class in appropriate page, like I assume now contact is active page
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

Use a class for the current page instead.
:active will only work when you click the link - so that the link is now active..

Answer 4

you can use border:none; .it will solve your problem

Answer 5

There is currently no way to select the parent of an element in CSS.
give border to a so that it can remove its own styling
.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
}
or make a separate class for this and add it to that element with JS

Answer 6

Give main border to a tag instead of 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

if you have including the link file to all the page follow like this
general
<?php
$general='active';
include('link.php');
?>
contact
<?php
$contact='active';
include('link.php');
?>
link
<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>