html - 根据选项卡选择显示/隐藏图像

Question

我设置了一些选项卡，但我很难确定如何根据选择的选项卡显示/隐藏图像。当页面加载时，tab1 和 img1 是可见的。当我点击 tab2 时，我想隐藏 img1 并显示 img2 等。

这个例子展示了我目前所拥有的: http://jsfiddle.net/NbyXb/

这是 HTML:

<div id="tab-area" class="light">

    <div class="dummy" id="first">
        <input type="radio" name="pane" id="p1" />
        <div class="dummy" id="second">
            <input type="radio" name="pane" id="p2" />
            <div class="dummy" id="third">
                <input type="radio" name="pane" id="p3" />
                <div class="dummy" id="fourth">
                    <input type="radio" name="pane" id="p4" />
                    <div class="dummy">

                        <ul class="tabs">                       
                            <li id="tab1"><span class="active" tabindex="1"></span><label for="p1">Tab1</label></li>
                            <li id="tab2"><span class="active" tabindex="1"></span><label for="p2">Tab2</label></li>
                            <li id="tab3"><span class="active" tabindex="1"></span><label for="p3">Tab3</label></li>
                            <li id="tab4"><span class="active" tabindex="1"></span><label for="p4">Tab4</label></li> 
                        </ul>

                        <div class="tab-strip"></div>

                        <div class="panes-scroll">
                            <div class="panes-items">
                                <div id="pane1">
                                    <h2>Tab 1 area</h2>        
                                </div>

                                <div id="pane2">
                                    <h2>Tab 2 area</h2>
                                </div>

                                <div id="pane3">
                                    <h2>Tab 3 area</h2>
                                </div>

                                <div id="pane4">
                                    <h2>Tab 3 area</h2>
                                </div>
                            </div> <!-- end of .panes-items -->
                        </div>  <!-- end of .panes-scroll -->
                    </div>
                </div>  <!-- end #fourth -->
            </div>  <!-- end #third -->
        </div>  <!-- end #second -->
    </div>  <!-- end #first -->
</div> <!--end of #tab-area-->

<div class="images">
    <img id="tab1-img" src="images/img1.png">
    <img id="tab2-img" src="images/img2.png">
    <img id="tab3-img" src="images/img3.png">
    <img id="tab4-img" src="images/img4.png">
</div>

这是 CSS:

#tab-area {
    margin: 40px;
}

.dummy {
    outline: none;  /* For IE */
}

input[name=pane] { display: none;}

.tabs {
    position: relative;
    list-style: none;
}

.tabs li {
    position: relative;
    width: 100px;
    height: 38px;
    float: left;
    font: bold 14px Arial, sans serif;
    letter-spacing: 1px;
}

.tabs li:first-child {
    margin-left: 30px;
}

.tabs li:last-child {
}

.tabs li .active:before {
    content: '';
    position: absolute;
    top: 40px;
    left: -10px;
    width: 10px;
    height: 8px;
}

.tabs li .active:after {
    content: '';
    position: absolute;
    top: 40px;
    left: 107px;
    width: 10px;
    height: 8px;
}

.tab-strip {
    content: '';
    position: relative;
    clear: both;
    z-index: 1;
    height: 10px;
    width: 700px;
}

.panes-scroll {
    width: 698px;
    position: relative;
    overflow: hidden;
    border: 1px solid #aaa;
    height: 250px;
}

.panes-items {
    width: 2800px;
    position: relative;
    -webkit-transition: margin-left 500ms ease-in-out;
    -moz-transition: margin-left 500ms ease-in-out;
    -o-transition: margin-left 500ms ease-in-out;
    -ms-transition: margin-left 500ms ease-in-out;
    transition: margin-left 500ms ease-in-out;
}

.panes-items > div {
    padding: 20px;
    width: 660px;
    height: 0;
    font: 12px Arial, sans serif;
    float: left;
}

.panes-items > div:first-of-type { height: auto; }
.tabs li:first-child .active { display: block;}

input[name=pane]:checked + .dummy .panes-items > div { height: 0; }
input[name=pane]:checked + .dummy .tabs li .active { display: none;}

#p1:checked + .dummy .panes-items { 
    margin-left: 0;
}
#p2:checked + .dummy .panes-items {
    margin-left: -700px;
}
#p3:checked + .dummy .panes-items {
    margin-left: -1400px;
}
#p4:checked + .dummy .panes-items {
    margin-left: -2100px;
}

#p1:checked + .dummy .panes-items > div:nth-of-type(1) ,
#p2:checked + .dummy .panes-items > div:nth-of-type(2) ,
#p3:checked + .dummy .panes-items > div:nth-of-type(3) ,
#p4:checked + .dummy .panes-items > div:nth-of-type(4) {
    height: auto;
}

#p1:checked + .dummy .tabs li:nth-child(1) .active,
#p2:checked + .dummy .tabs li:nth-child(2) .active,
#p3:checked + .dummy .tabs li:nth-child(3) .active,
#p4:checked + .dummy .tabs li:nth-child(4) .active {
    display: block;
}

#tab1-img {
    display: block;
}
#tab2-img {
    display: none;
}
#tab3-img {
    display: none;
}
#tab4-img {
    display: none;
}

Answer 1

您可以使用一点点 javascript(具体来说是 jQuery)轻松地做到这一点
JS:

$(function(){
    $('.tabs label').click(function(){
       $('.images img').hide();
        $('#tab'+($(this).parent('li').index()+1)+'-img').show(); 
    });
});

fiddle : http://jsfiddle.net/EZ33Y/1/ (我用实际图像替换了图像，因为原始图像没有加载)

此外，请注意，通常甚至选项卡本身也应通过 JavaScript 完成。这允许进一步的浏览器兼容性，并且是做事的标准方法。