将两个类添加到不同的元素

我正在构建一个website，它的左侧是垂直导航，右侧是内容，其中nav的宽度是20％，内容是80％。将两个类添加到不同的元素

我想单击（切换div，内导航）更改导航的宽度为5％和内容宽度为95％。

我知道如何将类添加到被点击的元素，但我必须了解如何影响其他元素。任何帮助将不胜感激！

<div class="nav"> 
      <div class="toggle"> 
       <img src="images/toggle.png"/> 
      </div> 
      <ul> 
       <li class="header"><p>Szymon Fraczyk<br>photography</p></li> 
       <li class="szymon"><a href="index.html"><p>Szymon Fraczyk</p></a></li> 
       <li class="zdjecia"><a href="index.html"><p>Zdjecia</p></a></li> 
       <li class="slubne"><a href="index.html"><p>Slubne</p></a></li> 
       <li class="chrzciny"><a href="index.html"><p>Chrzciny</p></a></li> 
       <li class="kontakt"><a href="index.html"><p>Kontakt</p></a></li> 
       <li class="kontakt"></li> 
      </ul> 
     </div> 
     <div class="content"> 
      <div class="royalSlider rsDefault"> 
       <img class="rsImg" src="images/1.jpg" alt="image desc" /> 
       <img class="rsImg" src="images/2.jpg" alt="image desc" /> 
       <img class="rsImg" src="images/3.jpg" alt="image desc" /> 
       <img class="rsImg" src="images/4.jpg" alt="image desc" /> 
       <img class="rsImg" src="images/5.jpg" alt="image desc" /> 
       <img class="rsImg" src="images/6.jpg" alt="image desc" /> 
       <img class="rsImg" src="images/7.jpg" alt="image desc" /> 
      </div> 
     </div> 
    </div>

来源

2013-02-27 Marek

他们都有一个唯一的ID？你能告诉我们任何你试过的HTML /代码吗？ – TommyBs 2013-02-27 16:49:41

他们每个人都有一个类：.nav和.content – Marek 2013-02-27 16:52:05

检查querySelector http://caniuse.com/#search=queryselector，他们可能会给你一个线索，但请记住它的ie8 + – Toping 2013-02-27 17:20:21

您可以使用动画和JQuery做你想做什么：

您的代码：http://jsfiddle.net/f9RTJ/5/

我给你一些不错的动画效果:)

CSS ：

.nav { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:20%; 
    background-color:#ccc; 
} 

.content { 
    position:absolute; 
    top:0px; 
    right:0px; 
    width:80%; 
    background-color:#aaa; 
}

的JavaScript：

$('.content').click(function(){ 
    $(this).animate({'width':'80%'}) ; 
    $('.nav').animate({'width':'20%'}) ; 
}) ; 

$('.nav').click(function(){ 
    $(this).animate({'width':'5%'}) ; 
    $('.content').animate({'width':'95%'}) ; 
}) ;

来源

2013-02-27 16:56:45

你可以反转大小if你想要的反效果;） – 2013-02-27 17:00:35

我更新答案以匹配你的代码 – 2013-02-27 17:12:16

为什么使用jquery？ – Toping 2013-02-27 17:15:56

查看页面，如果你添加一个ID，内容格会更容易些。那么你将能够

var d = document.getElementById('content'); 
d.className = d.className + "wideClass";

否则，你将不得不遍历所有的div和找到类'内容'。类似于这个答案： Select element by and classname in javascript

无论哪种方式，一旦你选择了元素，你可以附加一个宽度为95％的类，只要你想。

来源

2013-02-27 16:56:54 Schleis

将两个类添加到不同的元素

回答

相关问题