點擊後的活動鏈接

-1

我無法找到一種方法來將一個類添加到導航欄的「a」元素。點擊後的活動鏈接

這是HTML導航和jQuery的（適用於test.html的網址，而對其進行測試）：

$(document).ready(function() { 
 
    $("a").click(function() { 
 
    var actRef = $(this).attr("href"); 
 
    if (actRef === "test.html") { 
 
     $("a[href='test.html']").addClass("active"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<nav> 
 
    <ul> 
 
    <li><a href="index.html">Inicio</a> 
 
    </li> 
 
    <li><a href="test.html">Test</a> 
 
    </li> 
 
    <li><a href="#">Item</a> 
 
    </li> 
 
    <li><a href="test2.html"> test2</a> 
 
    </li> 
 
    </ul> 
 
</nav>

這個心不是工作，它只是沒有做任何事情，但如果我將.click更改爲.hover，它可以很好地添加類，但不會轉到鏈接，因此頁面的信息不會更改。
我也試過這樣：How to change active class while click to another link in bootstrap use jquery?但既不可行的，因爲e.preventDefault(); ...

如果我拿出的preventDefault它不會添加的類別，但它會轉發給的鏈接...

PD組成：目的是讓用戶知道他實際上在哪個標籤上，取決於他點擊的菜單鏈接。

來源

2014-12-06 Alpha2k

所以你想改變類**和**導航到URL？ – 2014-12-06 19:54:37

@SalmanA是的，所以用戶知道他實際上在哪個標籤上導航 – Alpha2k 2014-12-06 20:01:22

只是爲了澄清，您的要求是將鏈接上載到用戶導航。所以你想看看他實際上是在哪。案例1： - 用戶點擊鏈接test.html，高亮，然後用戶到達test.html。這是回到oridinary。情況2： - 一旦用戶在頁面test.html，他希望它被高亮，直到他在test.html – Panther 2014-12-06 20:25:01

由於@Panther這比我想象的容易：

$(document).ready(function(){ 
var location = window.location.pathname; 
location = location.replace("/", ""); 
$("a[href='"+location+"']").addClass("active"); 
});

來源

2014-12-06 20:54:51 Alpha2k

@Panther他的解決方案呢？ – Alpha2k 2014-12-06 20:55:39

所以你可以做的是，你可以在URL查詢字符串像添加網頁鏈接：

www.example.com/test.html?pageinfo=test.html

現在成功的頁面加載後你可以從查詢字符串頁面信息，然後你可以添加活動類到錨標記。

這樣你將得到像這樣的查詢字符串pageinfo=test.html，並且在成功解析查詢字符串之後，你將把信息轉換爲{pageinfo:test.html}。

使用它可以將樣式/類添加到錨標記。

來源

2014-12-06 20:07:18

你真的需要添加一個類到html元素嗎？如果是關於造型的話，我認爲可以用簡單的:active僞選擇器來解決你的造型。見下面的例子：

li:active { 
 
    background-color: #f99; 
 
} 
 

 
li a:active { 
 
    color: #fff; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="index.html">Inicio</a> 
 
    </li> 
 
    <li><a href="test.html">Test</a> 
 
    </li> 
 
    <li><a href="#">Item</a> 
 
    </li> 
 
    <li><a href="test2.html"> test2</a> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2014-12-06 20:07:39 ckuijjer

爲什麼不使用則anchors:active狀態：

a:active { 
    /* your .active styles */ 
}

來源

2014-12-06 20:08:20 Vucko

積極無效的工作，以及但只有只要我按住點擊，當我釋放它，它返回默認的CSS我給。 – Alpha2k 2014-12-06 20:13:20

您的代碼不工作，你試圖設置使用JavaScript的一些鏈接類，然後導航同一時間。所以事情是你改變類鏈接的部分實際上是工作的，但是你不能在導航html被重新加載後看到它。

爲了解決這個問題，你需要編寫一個通用的函數來更新鏈接的類，在你的常用html中。但是，從在onload事件中加載的html調用該函數，而不是在點擊時調用。

您共同JS或HTML將是具有功能： -

highlightlink(linkid){ 
    $("a[href=' + linkid +']").addClass("active"); 
}

每個HTML將調用與各自的htmlname這個載體作用的onload。例如測試。HTML將帽子下面的代碼： -

$(document).ready(function(){ 
    highlightlink('test.html') 
}); 
});

雖然index.html的將有： -

$(document).ready(function(){ 
    highlightlink('index.html') 
}); 
});

一旦你的HTML被加載，該特定HTML將加載

來源

2014-12-06 20:14:28 Panther

點擊後的活動鏈接

回答

相關問題