CODEWITHSUNDEEP
csshyperlinkborder
AMC
AMC

Reputation: 1695

highlight page link when on page- a:active?

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.)

live site

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

Upvotes: 0

Views: 254

Answers (4)

Afshin
Afshin

Reputation: 4215

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

Upvotes: 1

Max Doumit
Max Doumit

Reputation: 1115

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

Style 

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

Jquery function

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

Upvotes: 0

Brenda
Brenda

Reputation: 373

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).

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.

Upvotes: 0

Peace
Peace

Reputation: 296

i think what you need is not a:active but instead you should do 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>

Upvotes: 0

Related Questions