1

わかりました。ウェブサイトのトップメニューに、それぞれがクラスdiv内にあるリンクのリストがあります。アクティブなリンク（現在のページ）の境界線をnoneに設定したい。しかし、私はコードにいくつかの問題があるようです！

トップメニューリンク

<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 を使用します。これは 1 つの方法の例です。

脚本

$('.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

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 に答える
0

代わりに、現在のページのクラスを使用してください。

：activeは、リンクをクリックしたときにのみ機能します。これにより、リンクがアクティブになります。

于 2013-03-14T05:27:36.720 に答える
0

あなたは使用することができます。それはborder:none;あなたの問題を解決します

于 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 に答える