在頁面上突出顯示頁面鏈接-a：active？

我有一個客戶列表的組合頁面，點擊時會顯示相應的畫廊 - 所有這些發生在同一頁面上。我希望在顯示相應圖庫時突出顯示客戶名稱。我認爲：積極會起作用，但到目前爲止不是。有任何想法嗎？（如果它的事項，我使用WordPress的。）在頁面上突出顯示頁面鏈接-a：active？

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

來源

2012-09-30 AMC

[這不是什麼'：active'的意思。]（http://stackoverflow.com/questions/5045352/confused-by-css-pseudo-class-active） – BoltClock

是的，這就是我所學到的。關於如何使我試圖實現的想法發生任何想法？ – AMC

我認爲你的問題是當你點擊一個鏈接頁回發 – Afshin

我想你需要的是不是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-30 17:08:30 Peace

感謝您的答案，但我仍然沒有看到客戶名稱周圍的橙色邊框。 – AMC

你可以使用jQuery。點擊鏈接時，添加一個類，例如突出顯示該鏈接的「當前」類，並從所有其他鏈接（例如，先前突出顯示的那個鏈接）中刪除該類。

我不認爲你可以純粹用CSS來做到這一點。主動類表示您正在主動點擊鏈接;它在完成點擊後不會持續。

來源

2012-09-30 17:18:03 Brenda

謝謝你的解釋。 iQuery不是我很熟悉的（但），你能提供一個例子嗎？ – AMC

<?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-30 17:21:14 Afshin

謝謝，這就是我正在尋找的！我應該在哪些文件中放置java？ – AMC

你可以把js文件分隔成html格式的腳本標籤 – Afshin

再說一遍，我真的非常新來整合jQuery。你能提供一個例子嗎？ – AMC

嘿爲什麼不使用類似下面的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-30 17:34:26

在頁面上突出顯示頁面鏈接-a：active？

回答

相關問題