Question

我有一个包含客户列表的投资组合页面，点击后会显示相应的图库 - 所有这些都发生在同一页面上。我希望在显示相应的图库时突出显示客户端名称。我想：主动会起作用，但到目前为止还没有。有任何想法吗？（如果重要的话，我正在使用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 -->

Answer 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>

Answer 2

我认为您需要的不是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>

Answer 3

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

我认为你不能用CSS完全做到这一点。：活动类意味着您正在主动单击链接;完成点击后它不会持续存在。

Answer 4

嘿，为什么不使用类似下面的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，您只需保存以前点击的锚。

在页面上突出显示页面链接-a：活动？

4 个答案: