通过单击 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