0

「class-1」でボックスの水平タイルを作成したいのですが、それらのいずれかをクリックすると、そのクラスは「class-2」に変更されますが、他のボックスは「class-1」のままです。

別のランダム ボックスをクリックすると、このボックスは「class-2」に変わり、他のすべてのボックスは「class-1」になります。

このようなものhttp://daniel-libeskind.com/projects

何か案は？トグルを試しましたが、うまくいきません。

また、それはワードプレスのウェブサイトになる予定です。

更新しました！

ブルーノたちのおかげで、あるところまでたどり着きました。今、私は次のレベルで立ち往生しています!

前述の Web サイトのように、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>

4

1 に答える 1

0

あなたが試すことができます

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

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

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

});

ここでフィドル

于 2012-11-01T14:58:41.653 に答える