Измените имя класса элемента на основе URL-адреса

Question

Итак, у меня есть несколько элементов (td с таблицы). Я хочу изменить их стиль на основе URL-адреса, который вы сейчас используете. Имея следующие страницы:

http:\\domain\site\welcome.html 
http:\\domain\site\press.html 
http:\\domain\site\contact.html 

Существует общая часть, а table и мне нужно изменить стиль td с.

HTML:

<table> 
    <tr> 
     <td id="welcome" class="default">Welcome</td> 
     <td id="press" class="default">Press</td> 
     <td id="contact" class="default">Contact</td> 
    </tr> 
</table> 

CSS:

.default { 
//settings 
} 
.current { 
//settings 
} 

Так в основном, если URL содержит строку welcome, то мне нужно class из td, имеющего id=welcome быть current. Я попробовал ниже, но ничего не делает.

<script src="jquery-1.4.2.min.js"> 
$(document).ready(
    function() { 
    if (document.URL.indexOf("welcome") > -1) 
    { 
     document.getElementById("welcome").className = "current"; 
    } 
    else if (document.URL.indexOf("press") > -1) 
    { 
     document.getElementById("press").className = "current"; 
    } 
    else if (document.URL.indexOf("contact") > -1) 
    { 
     document.getElementById("contact").className = "current"; 
    } 
}); 
</script> 

Answer 1

попробовать, как этот

<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(
    function() { 
if (document.URL.indexOf("welcome") > -1) 
{ 
    document.getElementById("welcome").className = "current"; 
} 
else if (document.URL.indexOf("press") > -1) 
{ 
    document.getElementById("press").className = "current"; 
} 
else if (document.URL.indexOf("contact") > -1) 
{ 
    document.getElementById("contact").className = "current"; 
}}); 
</script> 

Answer 2

Вы передаете src в <script> поэтому код игнорируется. изменить его к этому:

<script src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
    /* rest of code */ 
</script> 

Answer 3

// Add jquery lib and add below code after html in script tag 
var pathname = window.location.pathname; 
function getPageName(url) { 
var index = url.lastIndexOf("/") + 1; 
var filenameWithExtension = url.substr(index); 
var filename = filenameWithExtension.split(".")[0]; 
return filename;          
} 
var a = getPageName(pathname); $("#"+a).addClass("current");