2

这个简单的代码应该改变 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>
4

4 回答 4

2

试试这种方式：

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

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

于 2013-09-08T16:13:23.007 回答
0

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");
    });
});
于 2013-09-08T16:37:21.627 回答
0

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

于 2013-09-08T16:19:19.920 回答
0

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

$(function(){
   //
});
于 2013-09-08T16:13:33.650 回答