javascript - 单击菜单项时，更改正文样式

Question

我们需要做的是当你点击主菜单项时，改变BODY的样式，默认(body class = "front")在前面，但是当你点击菜单时，design, class不会在前面而是工作，当你点击菜单 pretul (body class = "pret") 等。

<jdoc:include type="modules" name="limbi" />

  <h1 id="site-name"><a href="/">web site</a></h1>
  <nav>
<!--
THIS MENU
-->
    <ul class="main-nav" >

     <li class="careers"><a href="/ro"><span class="menu-item-title">HOME</span></a>
</li>
<li class="work"><a href="/ro/design"><span class="menu-item-title">DESIGN</span></a>
</li>
<li class="pret"><a href="/ro/pret"><span class="menu-item-title">Pretul</span></a>
</li>
<li class="promovare"><a href="/ro/promovare"><span class="menu-item-     title">Promovare</span></a>
</li>
<li class="port"><a href="/ro/portofoliu"><span class="menu-item-title">Portofoliu</span></a>
</li>
<li class="contact"><a href="/contact"><span class="menu-item-title">Contacte</span>   </a>
</li>

     </ul>
  </nav>
</header>

Answer 1

如果要更改元素的类名，可以使用这些 Jquery 方法。

http://api.jquery.com/removeClass/

http://api.jquery.com/addClass/

var body = $('body');
body.removeClass('front').addClass('design');