在页面- a:激活时高亮页面链接?

I have a portfolio page with a list of clients which when clicked on will display the corresponding gallery- all of this happens on the same page. I would like for the client name to be highlighted when the corresponding gallery is shown. I thought a:active would work, but so far isn't. Any ideas? (If it matters, I'm using Wordpress.)

我有一个portfolio页面，上面有一个客户列表，当点击它时，会显示相应的图库——所有这些都发生在同一个页面上。我希望在显示相应的库时突出显示客户端名称。我原以为a:主动会有用，但到目前为止还不行。什么好主意吗?(如果重要的话，我在用Wordpress。)

live site

生活网站

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

.活动{边框: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 个解决方案

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

#2

i think what you need is not a:active but instead you should do a:visited.

我认为你需要的不是a:主动，而是a:参观。

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

#3

You could use jQuery. When a link is clicked, add a class, e.g., "current" that highlights that link, and removes the class from all the other links (e.g., whichever one was previously highlighted).

您可以使用jQuery。当一个链接被单击时，添加一个类，例如，突出显示该链接的“current”，并从所有其他链接中删除该类(例如，前面突出显示的那个)。

I don't think you can do this purely with CSS. The :active class means you are in the process of actively clicking the link; it doesn't persist after you finish clicking it.

我认为仅仅用CSS是不行的。活动类表示您正在积极点击链接;它不会在你点击它之后持续。

#4

Hey why not use a jquery function like the following for adding and removing classes. It goes like this

嘿，为什么不像下面这样使用jquery函数来添加和删除类呢?是这样的

Style

风格

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

Jquery function

Jquery函数

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

What query does it strip all the anchor tags from the class clicked and add it only to the current one.
Of course if you add specific click id to each anchor tag you can just save the previously clicked anchor.

它会从类中删除所有的锚标记并将其添加到当前的类中。当然，如果您向每个锚标记添加特定的单击id，您可以保存先前单击的锚点。

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

#2