當我移動arround頁面時，保持鏈接處於活動狀態，直到我選擇另一個鏈接

我遇到鏈接問題，我創建了一個由鏈接製作的菜單，同時指示用戶在哪個部分中。菜單工作正常，但是當我開始在該鏈接下的部分上進行操作時（它是僞類活動的，因爲它已被選中），那麼選擇的鏈接將變爲正常鏈接，因此用戶將失去方向。當我移動arround頁面時，保持鏈接處於活動狀態，直到我選擇另一個鏈接

我不認爲代碼是必要的，但只是爲了防止任何人需要它。

.menu 
{ 
    width:100%; 
    text-align:center; 



    } 
.menu a 
{ 
    height:30px; 
    width:170px; 
    background-image:url('../Images/item.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
    color:Black; 
    font-weight: bold; 
    font-family: Arial; 
    font-size: 11px; 
    text-decoration: none; 
    cursor:pointer; 
    word-spacing:-1px; 
    border:none; 
    padding:1px 0px 0px 0px; 
    margin-top:1px; 
    } 

.menu a:hover 
{ 
    background-image:url('../Images/itemHover.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
    font-weight: bold; 
    font-family: Arial; 
    font-size: 11px; 
    text-decoration: none; 
    cursor:pointer; 
    word-spacing:-1px; 

    } 
.menu a:active 
{ 
    background-image:url('../Images/itemActive.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
    color:White; 
    font-weight: bold; 
    font-family: Arial; 
    font-size: 11px; 
    text-decoration: none; 
    cursor:pointer; 
    word-spacing:-1px; 
    text-decoration: none; 
    } 




      <div class="menu" > 
       <a href='vbscript:show(0)' id='focusme'>Section1</a> 
       <a href='vbscript:show(6)'> Section2 </a> 
       <a href='vbscript:show(2)'> Section3 </a> 
       <a href='vbscript:show(3)'> Section4 </a> 
       <a href='vbscript:show(4)'> Section5</a> 
       <a href='vbscript:show(5)'> Section6 </a> 
       <a href='vbscript:show(1)'> Section7</a> 
       <a href='vbscript:show(7)'> Section8 </a> 
       <a href='vbscript:show(8)'> Section9 </a> 
       <a href="javascript:calllast24()"> Section10</a> 
      </div>

有人能給我一個提示嗎？

來源

2010-01-28 Amra

只是a:active定義另一個類active在一起，並且類添加到動態有問題的鏈接（並從菜單中的任何其他鏈接刪除同一類）。

JavaScript/jQuery完全適用於此目的。例如。

$('.menu a').click(function() { 
    $('.menu a').removeClass('active'); 
    $(this).addClass('active'); 
}

更新：或者，如果這些鏈接實際上是同步的，你實際使用的服務器端視圖技術，如PHP/JSP/ASP，那麼你就需要抓住其權力來代替。這裏有一個JSP示例：

<ul id="menu"> 
    <li><a href="foo" ${page == 'foo' ? 'class="active"' : ''}">foo</a></li> 
    <li><a href="bar" ${page == 'bar' ? 'class="active"' : ''}">bar</a></li> 
    <li><a href="boo" ${page == 'boo' ? 'class="active"' : ''}">boo</a></li> 
</ul>

上面的例子只是增加class="active"在當前頁面的鏈接的href匹配。你可以在PHP中做類似的操作（即三元操作符）。雖然不確定ASP。

來源

2010-01-28 14:37:31 BalusC

聽起來不錯，但我對jquery一無所知，你能舉一個更廣泛的例子嗎？請？當我加載頁面時，爲什麼會出現腳本錯誤？我該如何調用此功能？謝謝。 – Amra 2010-01-28 14:46:56

您基本上需要在'$（document）.ready（）'中加載它。對不起，我認爲這對web開發者來說已經足夠明顯了。在jQuery主頁上查看教程，瞭解關於jQuery的更多信息:) – BalusC 2010-01-28 14:48:49

Darm，感謝您的幫助，不幸的是，我正在做xsl文件，並且抱怨着sintax。我不能使用CDDATA標籤，因爲它會被瀏覽器解釋爲文本。無論如何，謝謝。塞薩爾。 – Amra 2010-01-28 15:02:23

當單擊JavaScript時，使用JavaScript添加類似「current」的類名到當前選定的鏈接。

您可以回收「懸停」類或製作一個獨特的類。

.menu a:active, .menu a.current 
{ 
    background-image:url('../Images/itemActive.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
    color:White; 
    font-weight: bold; 
    font-family: Arial; 
    font-size: 11px; 
    text-decoration: none; 
    cursor:pointer; 
    word-spacing:-1px; 
    text-decoration: none; 
    }

來源

2010-01-28 14:36:56

當我移動arround頁面時，保持鏈接處於活動狀態，直到我選擇另一個鏈接

回答

相關問題