When a page has multiple a tags, and when clicked, it will jump to the current page. How can the clicked tag change color and be highlighted, and other tags return to their original colors?
Using JS you can achieve:
Assume that the current page is "1.aspx"
1. Set a value for a tag ID:
Copy the code code as follows:
<a href="1.aspx?id=1" id="1" target="_parent">""</a>
<a href="1.aspx?id=2" id="2" target="_parent">""</a>
<a href="1.aspx?id=3" id="3" target="_parent">""</a>
2. Write JS method:
Copy the code code as follows:
<script>
&(document).ready(function(){
var id = windows.ulr.substring(windows.ulr.IndeOf("?id="),1) //Get the id value
var currtA = document.getElementById(id); //Get the currently clicked a tag
if(currtA != null)
curtA.style.color = "#f00";
});
</script>
For other situations, if the page does not jump when clicking the a tag, you can write like this:
Copy the code code as follows:
<a href="#" onclick="changeCss(this)">""</a>
<script>
function changeCss(obj){
var alist = document.getElementsByTagName("a");
for(var i =0;i < alist.Length;i++){
alist[i].style.color = "#000"; //Assign primary colors to all a tags
}
obj.style.color = "#f00"; //Highlight the current label
}
//Of course, you can also use Jquery's $("a").removeCss() and addCss() to achieve this
</script>