Question

所以我有几个元素（td s表。我想根据您当前使用的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
}

所以基本上如果网址包含字符串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>我尝试了以下但它没有做任何事情。

{{1}}

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" );

根据URL更改元素类名称

3 个答案: