Question

这个简单的代码应该改变body元素的类。但它不起作用！

问题可能出现在错误的jQuery版本链接中？

此外，非常奇怪，但在http://jsfiddle.net/4Bfa7/1/似乎有效！

<!doctype html>
<html lang="en">

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
<script type="text/javascript">    
    $("li.work").click(function(){
        $('body').removeClass();
        $('body').addClass("work");
});

$("li.pret").click(function(){
        $('body').removeClass();
        $('body').addClass("pret");
});

$("li.port").click(function(){
        $('body').removeClass();
        $('body').addClass("port");
});

$("li.contact").click(function(){
        $('body').removeClass();
        $('body').addClass("contact");
});
</script>    
<style>
body.contact{
background-color: red;}
</style>
</head>    
<body class="front">
<div id=" container">
<header>

<h1 id="site-name"><a href="/"> Crearea web site</a></h1>
<nav>

<ul class="main-nav">

<li class="careers"><a href="/ro" onclick><span class="menu-item-title"> HOME</span></a>
</li>
    <li class="work"><a href="/ro/about"><span class="menu-item-title"> About</span></a>
</li>
<li class="pret"><a href="/ro/preti"><span class="menu-item-title"> Pretul</span></a>
</li>

<li class="port"><a href="/ro/portfolio"><span class="menu-item-title"> Portofoliu</span></a>
</li>
<li class="contact"><a href="#"><span class="menu-item-title"> Contacte</span></a>
</li>

</ul>
</nav>
</header>
</body>
</html>

Answer 1

以这种方式尝试：

$( document ).ready( function() {
  /* your event handlers */
});

代码中的脚本在DOM元素存在之前执行，因此没有任何要绑定的东西。完全加载时会执行$( document ).ready()。

Answer 2

将您的代码包装在document.ready。

中

$(function(){
   //
});

Answer 3

将代码包装到$( document ).ready();或在代码</body>之前直接将代码放在文档底部，或将代码放在单独的文件中。加载文档后将加载此文件。

Answer 4

加载文档时尝试removeAttr。来自您的代码的RemoveAttr方法附加删除属性，removeClass仅清除class属性值。

$(document).ready(function (){  

    $("li.work").click(function(){
            $('body').removeAttr('class');
            $('body').addClass("work");
    });

    $("li.pret").click(function(){
            $('body').removeAttr('class');
            $('body').addClass("pret");
    });

    $("li.port").click(function(){
            $('body').removeAttr('class');
            $('body').addClass("port");
    });

    $("li.contact").click(function(){
            $('body').removeAttr('class');
            $('body').addClass("contact");
    });
});

单击jquery更改类

4 个答案: