1

我想在页面加载时显示一个 id 为“houseImages”的 div，同时隐藏 div“landImages”、“renovationImages”、“UpcomingImages”和“voteForNext”。单击“美化”后，我想显示 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

我建议将您更改为您<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 回答
0

我个人喜欢 Hide -> fadeIn 效果组合。如果您有 2 个按钮和 2 个 div，您可以切换显示哪个按钮，如下所示：

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 捕获的任何事件，并显示/隐藏和 div。

于 2012-06-15T17:39:20.740 回答