通过点击内部和外部的div + jquery滚动和自动中心来更改类DIV

Question

我想在框中使用“class-1”制作水平贴图，当您单击其中任何一个时，其类应更改为“ class-2“，而其他盒子仍然是”class-1“。

当您单击另一个随机框时，此框应更改为“class-2”，其他所有应为“class-1”。

像这样http://daniel-libeskind.com/projects

什么想法？我试过切换，但不起作用。

这也是一个WordPress的网站。

---

更新！

感谢布鲁诺等人，我已经达到了某个程度。现在我陷入了新的境界！

如何在点击他们之后像我之前提到的网站一样将DIV集中起来？ 如何添加一个像自动居中DIV和动态内容一样的jQuery滚动？

谢谢先进。

所有代码到现在（也许有人觉得它有用）

这里是java的一部分：

<script type="text/javascript"> 
    var toggler = (function(_window) { 
     var current = null, 
     clazz = { 
      opened: 'second', 
      closed: 'first', 
      content: 'box-in' 
     }, 
     addEvent = function(element, event, func, capture) { 
      if (_window.addEventListener) { 
       element.addEventListener(event, func, capture); 
      } else if (window.attachEvent) { 
       _window.attachEvent('on' + event, func);  
      } 
     }, 
     handler = function(event) { 
      if (current !== null && current !== event.target) { 
       toggle(current); 
      } 

      toggle(event.target); 
     }, 
     toggle = function(target) { 
      var content = null, 
      re = { 
       opened: new RegExp(clazz.opened, "g"), 
       closed: new RegExp(clazz.closed, "g") 
      }, 
      i; 

      for (i = 0; i < target.childNodes.length; i++) { 
       if (target.childNodes[i].nodeType == 1) { 
        if (target.childNodes[i].id === clazz.content) { 
         content = target.childNodes[i]; 
         break; 
        } 
       } 
      } 

      if (re.opened.test(target.className)) { 
       target.className = (target.className).replace(re.opened, clazz.closed); 
       content.style.display = 'none'; 
       current = null; 
      } else { 
       target.className = (target.className).replace(re.closed, clazz.opened); 
       content.style.display = 'block'; 
       current = target; 
      } 
     }; 

     return { 
      init: function(element) { 
       var el = document.getElementById(element), 
       boxes = el.childNodes, 
       box, i; 

       for (i = 0; i < boxes.length; i++) { 
        if (boxes[i].nodeType == 1) { 
         box = document.getElementById(boxes[i].id); 
         addEvent(box, 'click', handler, false); 
        } 
       } 
      } 
     }; 
    })(window); 

和这里的CSS

#full {margin:0 auto; overflow: auto; height:100%; width:1050px;} #toggler {float:left; margin-right:-30000px;} .box{float:left; margin:2px;} .first{width:300px; height:200px; background:#999;-webkit-transition:all ease-in-out 0.3s;} .second{width:380px; height:400px; background:#000; -webkit-transition:all ease-in-out 0.3s; overflow:hidden;} #box-in {display:none; font-family:Tahoma, Geneva, sans-serif; padding:20px;} #box-title{color:#FFF; font-size:16px; padding-bottom:5px;} #box-content{color:#888; font-size:12px; text-align:justify;} 

和HTML

<div id="full"> 
<div id="toggler"> 
    <!-- IMPORTANT: ID of these div boxes MUST be unique --> 
    <div id="box1" class="box first"> 
     <div id="box-in"> 
      <div id="box-title">Lorem Ipsum Du Si Amet</div> 
      <div id="box-content"></div> 
     </div> 
    </div> 

    <div id="box2" class="box first"> 
     <div id="box-in"> 
      <div id="box-title">Praesent tempor mattis viverra.</div> 
      <div id="box-content"></div> 
     </div> 
    </div> 

    <div id="box3" class="box first"> 
     <div id="box-in"> 
      <div id="box-title">Title 3</div> 
      <div id="box-content">Content 3</div> 
     </div> 
    </div> 

    <div id="box4" class="box first"> 
     <div id="box-in"> 
      <div id="box-title">Title 3</div> 
      <div id="box-content">Content 3</div> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
    toggler.init('toggler'); // -> ID of the wrapper DIV (e.g above at line 38) 
</script> 

Answer 1

您可以尝试

$(".class").click(function() { 

    $(".class").not(this).removeClass("class-2").addClass("class-1"); 

    $(this).removeClass("class-1").addClass("class-2"); 

}); 

小提琴here