已更新！

Question

我想制作一个带有“class-1”的水平方块，当你点击其中任何一个时，它的类应该改为“class-2”而其他方框仍然是“class-1”。 / p>

当您点击另一个随机框时，此框应更改为“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

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

已更新！

1 个答案: