刪除包含活動鏈接

確定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

刪除包含活動鏈接

回答

相關問題