0

クリックすると対応するギャラリーが表示されるクライアントのリストを含むポートフォリオ ページがあります。これはすべて同じページで行われます。対応するギャラリーが表示されたときに、クライアント名が強調表示されるようにしたいと思います。私は a:active がうまくいくと思っていましたが、今のところうまくいきません。何か案は？(問題があれば、Wordpress を使用しています。)

ライブサイト

.active { border: 1px solid #ff893b; } 

<div id="client-list">
<p>
    <a href="?page_id=24" <?php if ($_get['page_id']=='24'){echo 'class="active"';} ?> >H&auml;agen Dazs</a><br/>
    <a href="?page_id=26" <?php if ($_get['page_id']=='26'){echo 'class="active"';} ?>>Hugo Boss Rodeo Drive</a><br/>
    <a href="?page_id=28" <?php if ($_get['page_id']=='28'){echo 'class="active"';} ?>>Ford</a><br/>
    <a href="?page_id=30" <?php if ($_get['page_id']=='30'){echo 'class="active"';} ?>>MOCA Contemporaries</a><br/>
    <a href="?page_id=32" <?php if ($_get['page_id']=='32'){echo 'class="active"';} ?>>XBOX 360 Halo 3 Sneak Preview</a><br/>
    <a href="?page_id=34" <?php if ($_get['page_id']=='34'){echo 'class="active"';} ?>>Saddlerock Smith &amp; Basso Weddings</a><br/>
    <a href="?page_id=36" <?php if ($_get['page_id']=='36'){echo 'class="active"';} ?>>Christie&apos;s</a><br/>
    <a href="?page_id=42" <?php if ($_get['page_id']=='42'){echo 'class="active"';} ?>>Instyle Magazine + Ming by Mango</a></p>

<script type="text/javascript">

  $(document).ready(function(){
    $('a').click(function(){
      $('a').removeClass('active');
      $(this).addClass('active');

     });

    });   

</script>

</div><!-- end client-list -->
4

4 に答える 4

1 
 <?php
 if (!isset($_GET['page_id'])) {
    $page_id='24';
     }else{
     $page_id=$_GET['page_id'];
    }
 ?>
<html>
<head>
<title>Lab 1</title> 
<style>
 .active { 
 border: 1px solid #ff893b;
 background:red;
 color:white;
}
</style>
</head>

<body>
<div id="client-list">
<p>
    <a href="?page_id=24" <?php if ($page_id=='24'){echo 'class="active"';} ?>> H&auml;agen Dazs</a><br/>
    <a href="?page_id=26" <?php if ($page_id=='26'){echo 'class="active"';} ?>> Hugo Boss Rodeo Drive</a><br/>
    <a href="?page_id=28" <?php if ($page_id=='28'){echo 'class="active"';} ?>> Ford</a><br/>
    <a href="?page_id=30" <?php if ($page_id=='30'){echo 'class="active"';} ?>> MOCA Contemporaries</a><br/>
    <a href="?page_id=32" <?php if ($page_id=='32'){echo 'class="active"';} ?>> XBOX 360 Halo 3 Sneak Preview</a><br/>
    <a href="?page_id=34" <?php if ($page_id=='34'){echo 'class="active"';} ?>> Saddlerock Smith &amp; Basso Weddings</a><br/>
    <a href="?page_id=36" <?php if ($page_id=='36'){echo 'class="active"';} ?>> Christie&apos;s</a><br/>
    <a href="?page_id=42" <?php if ($page_id=='42'){echo 'class="active"';} ?>> Instyle Magazine + Ming by Mango</a>
</p>
</div>
</body>
 </html>
于 2012-09-30T17:21:14.883 に答える
0

あなたが必要とするのはそうではないと思いますa:activeが、代わりにあなたがすべきですa:visited。

#client-list p a:visited { border: 1px solid #ff893b; }

html

<div id="client-list">

 <p><a href="?page_id=24">H&auml;agen Dazs</a><br/><a href="?page_id=26">Hugo Boss Rodeo Drive</a><br/><a href="?page_id=28">Ford</a><br/><a href="?page_id=30">MOCA Contemporaries</a><br/><a href="?page_id=32">XBOX 360 Halo 3 Sneak Preview</a><br/><a href="?page_id=34">Saddlerock Smith &amp; Basso Weddings</a><br/><a href="?page_id=36">Christie&apos;s</a><br/><a href="?page_id=42">Instyle Magazine + Ming by Mango</a></p>

</div>
于 2012-09-30T17:08:30.433 に答える
0

クラスの追加と削除に、次のようなjquery関数を使用してみませんか。こんなふうになります

スタイル

#client-list a.clicked
{
 color : #ffffff;
/* or what ever style you want */
}

Jquery 関数

$(function(){.removeClass()
     $('#client-list a').bind('click' , function(){
     $('#client-list a').removeClass('clicked');
     $(this).addClass('clicked');
   } )
})

クリックされたクラスからすべてのアンカータグを取り除き、現在のアンカータグにのみ追加するクエリは何ですか。
もちろん、各アンカー タグに特定のクリック ID を追加すると、以前にクリックしたアンカーを保存することができます。

于 2012-09-30T17:34:26.897 に答える
0

jQueryを使用できます。リンクがクリックされると、そのリンクを強調表示する "current" などのクラスを追加し、他のすべてのリンク (以前に強調表示されたリンクなど) からそのクラスを削除します。

CSS だけでこれを行うことはできないと思います。:active クラスは、アクティブにリンクをクリックしていることを意味します。クリックした後は保持されません。

于 2012-09-30T17:18:03.333 に答える