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

你可以使用 jQuery。当点击链接时，添加一个类，例如突出显示该链接的“当前”，并从所有其他链接中删除该类（例如，之前突出显示的那个）。

我不认为你可以纯粹用 CSS 来做到这一点。:active 类表示您正在主动点击链接；完成单击后它不会持续存在。

于 2012-09-30T17:18:03.333 回答
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 回答