1

「landImages」、「renovationImages」、「UpcomingImages」、および「voteForNext」の div を非表示にしながら、ページの読み込み時に ID「houseImages」の div を表示したいと思います。「ランドスケープ」をクリックすると、div「landImages」を表示し、div「houseImages」を非表示にしたいと思います。明らかに、この機能をリスト全体で継続し、[ペイント] をクリックすると div が再表示されるようにしたいと考えています。JavaScriptを使用してこれを行うにはどうすればよいですか?

これが私がこれまでに持っているものです：

<Div id="mainContent">
            <h2> Our House </h2>
            <div id="columnLeft">
                <ul>
                    <li id="leftColumnPainting">
                        <a href="#houseImages">Painting</a>
                    </li>
                    <li id="leftColumnLandscaping">
                        <a href="landscaping.html">Landscaping</a>
                    </li>
                    <li id="leftColumnRenovations">
                        <a href="renovations.html">Renovations</a>
                    </li>
                    <li id="leftColumnUpcoming">
                        <a href="upcoming.html">Upcoming</a>
                    </li>
                    <li id="leftColumnNext">
                        <a href="whatsnext.html">Vote for <br>Next!</br></a>
                    </li>
                </ul>
            </div>
            <div id="columnRight">
                <div id="title">
                <p> Over the course of a couple years we have done a number of projects around the house. Click on a link to your left to see the improvements! Don't forget to vote for what's next!
                </p>
                </div>
                <div id="houseImages">
                <ul>
                    <li>
                        <a href="Painting.html"><img src="./img/house1.jpg" /></a>
                    </li>
                    <li>
                        <a href="Painting.html"><img src="./img/house2.jpg" /></a>
                    </li>
                    <li>
                        <a href="Painting.html"><img src="./img/house3.jpg" /></a>
                    </li>
                    <li>
                        <a href="Painting.html"><img src="./img/house4.jpg" /></a>
                    </li>

                </ul>
                </div>
                <div id="landImages">
                <ul>
                    <li>
                        <a href="Painting.html"><img src="./img/land1.jpg" /></a>
                    </li>
                    <li>
                        <a href="Painting.html"><img src="./img/land2.jpg" /></a>
                    </li>
                    <li>
                        <a href="Painting.html"><img src="./img/land3.jpg" /></a>
                    </li>
                    <li>
                        <a href="Painting.html"><img src="./img/land4.jpg" /></a>
                    </li>

                </ul>
                </div>
                <div id="renovationImages">
                <ul>
                    <li>
                        <a href="Painting.html"><img src="./img/renovation1.jpg" /></a>
                    </li>
                    <li>
                        <a href="Painting.html"><img src="./img/renovation2.jpg" /></a>
                    </li>
                    <li>
                        <a href="Painting.html"><img src="./img/renovation3.jpg" /></a>
                    </li>
                    <li>
                        <a href="Painting.html"><img src="./img/renovation4.jpg" /></a>
                    </li>

                </ul>
                </div>
                <div id="upcomingImages">
                <ul>
                    <li>
                        <a href="Painting.html"><img src="./img/upcoming1.jpg" /></a>
                    </li>
                    <li>
                        <a href="Painting.html"><img src="./img/upcoming2.jpg" /></a>
                    </li>
                    <li>
                        <a href="Painting.html"><img src="./img/upcoming3.jpg" /></a>
                    </li>
                    <li>
                        <a href="Painting.html"><img src="./img/renovation4.jpg" /></a>
                    </li>

                </ul>
                </div>
                <div id="voteForNext">
                    <p> enter in voting form here</p>
                </div>
            </div>
        </Div>
4

2 に答える 2

0

個人的には、非表示 -> フェードイン エフェクトの組み合わせが好きです。2 つの div に 2 つのボタンがある場合、どちらを表示するかを次のように切り替えることができます。

HTML:

<div id="a">div 1</div>

<div id="b">div 2</div>
<button id="c">show div 1</button>
<button id="d">show div 2</button>​

CSS:

div{
    width: 200px;
    height: 200px;
    border: solid 1px;
    display: none;
}​

JS:

$('#c').click(function() {
    $('#b').hide();
    $('#a').fadeIn();
});
$('#d').click(function() {
    $('#a').hide();
    $('#b').fadeIn();
});​

JSfiddle を参照してください: http://jsfiddle.net/HSNLN/

このメソッドは、jQuery、show/hide、および div でキャッチできる任意のイベントにアタッチします。

于 2012-06-15T17:39:20.740 に答える
0

<a href="">表示したいdiv の ID に変更することをお勧めします。次に、次のようなことができます。


$("#columnleft li a").click(function(e) {
   e.preventDefault();
   $("columnright div").hide();
   $("#"+$(this).attr("href")).show();
});
于 2012-06-15T17:33:36.617 に答える