0

左側に垂直ナビゲーション、右側にコンテンツがあり、ナビゲーションの幅が 20%、コンテンツが 80%のWeb サイトを構築しています。

(ナビゲーション内のトグル 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>
4

2 に答える 2

2

アニメーションと 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-27T16:56:45.490 に答える
2

ページを見てみると、コンテンツ div に id を追加した方が簡単です。それからあなたはできるでしょう

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

それ以外の場合は、すべての div をループして、「コンテンツ」クラスの div を見つける必要があります。この回答に似ています： javascriptで要素とクラス名を選択してください

いずれにせよ、要素を選択したら、必要に応じて幅を 95% にするクラスを追加できます。

于 2013-02-27T16:56:54.683 に答える