I am looking to modify the color of the selected language when clicked. See my code snippet below:
$(document).ready(function(){
$("a[href*='lang']").click(function(e) {
e.preventDefault();
$('#header-top a').removeClass('active');
$(this).addClass('active');
});
});
JSP code:
<div id="header-top">
<a href="/eidsar" title="Logo">
<img class="logo" src="/eidsar/images/MobistarLogo.jpg" />
</a>
<ul class="lang-nav">
<li><a class="active" href="?lang=en" title="en">EN</a></li>
<li><a href="?lang=fr" title="fr">FR</a></li>
<li><a href="?lang=nl" title="nl">NL</a></li>
</ul>
</div>
CSS:
.lang-nav {
padding: 0;
list-style: none;
margin-left: 1100px;
line-height: 42px;
}
.lang-nav li {
display: inline;
margin: 0 5px;
}
.lang-nav li a {
color: #999999;
text-decoration: none;
}
.lang-nav li a:hover {
color: #fff
}
.active {
color: #fff;
}
However, using e.preventDefault(); prevents me from navigating to the ?lang=en link. How can I resolve this issue? Any suggestions are welcome.
I attempted to address this in the onload function:
<script>
function checkUrl(){
var title = document.getElementById("nl").title;
alert(title);
if(title == "en"){
document.getElementById("en").href = '?lang=en';
document.getElementById("en").style.color = 'red';
document.getElementById("fr").style.color = 'blue';
document.getElementById("nl").style.color = 'green';
}
if(title == "fr"){
document.getElementById("en").style.color = '#999999';
document.getElementById("fr").style.color = 'red';
document.getElementById("nl").style.color = '#999999';
document.getElementById("fr").href = '?lang=fr';
} if(title == "nl"){
document.getElementById("en").style.color = '#999999';
document.getElementById("fr").style.color = '#999999';
document.getElementById("nl").style.color = 'red';
document.getElementById("nl").href = '?lang=nl';
}
}
</script>
</head>
<body onload="checkUrl()" >
<div>
<div id="header-top">
<a href="/eidsar" title="Logo"> <img class="logo"
src="/eidsar/images/MobistarLogo.jpg" />
</a>
<ul class="lang-nav">
<li><a id="en" href="?lang=en" title="en">EN</a></li>
<li><a id="fr" href="?lang=fr" title="fr">FR</a></li>
<li><a id="nl" href="?lang=nl" title="nl">NL</a></li>
</ul>
</div>
<div id="header-bottom">
<div style="visibility: hidden" id="header-content">
<ul class="head-nav"></ul>
</div>
</div>
</div>
The challenge now is how to pass the ids in the onload function???