显示/隐藏多个div的更好方法? [英] Better way to show/hide multiple divs?

问题描述

我有8个链接，所有链接都需要在单击时显示一个div.我一次只希望显示1个div，所以当单击一个新链接时，当前显示的div将被隐藏，而一个新的div将被显示.到目前为止，我有一个可行的jQuery解决方案，但是很丑陋.有更简单/更正确的方法来完成我想要的吗?

I have 8 links that all need to show a div on click. I want only 1 div to show at a time so when click on a new link the div that is currently displayed gets hidden and a new one gets displayed. So far I have a jQuery solution that works but it's ugly. Is there an easier/more correct way to accomplish what I want?

<div>
<a href="#" class="link">Click Link</a><br />
<a href="#" class="link2">Click Link 2</a><br />
<a href="#" class="link3">Click Link 3</a><br />
<a href="#" class="link4">Click Link 4</a><br />
<a href="#" class="link5">Click Link 5</a><br />
<a href="#" class="link6">Click Link 6</a><br />
<a href="#" class="link7">Click Link 7</a><br />
<a href="#" class="link8">Click Link 8</a><br />
 <div class="testVid hideDiv" style="background:pink; height:200px">Test Vid Div<br /><br /><span class="close">CLOSE</span></div>
<div class="testVid2  hideDiv" style="background:pink; height:200px">Test Vid Div 2<br /><br /><span class="close2">CLOSE 2</span></div>
<div class="testVid3 hideDiv" style="background:pink; height:200px">Test Vid Div 3<br /><br /><span class="close3">CLOSE 3</span></div>
<div class="testVid4  hideDiv" style="background:pink; height:200px">Test Vid Div 4<br /><br /><span class="close4">CLOSE 4</span></div>
<div class="testVid5 hideDiv" style="background:pink; height:200px">Test Vid Div 5<br /><br /><span class="close5">CLOSE 5</span></div>
<div class="testVid6 hideDiv" style="background:pink; height:200px">Test Vid Div 6<br /><br /><span class="close6">CLOSE 6</span></div>
<div class="testVid7 hideDiv" style="background:pink; height:200px">Test Vid Div 7<br /><br /><span class="close7">CLOSE 7</span></div>
<div class="testVid8 hideDiv" style="background:pink; height:200px">Test Vid Div 8<br /><br /><span class="close8">CLOSE 8</span></div>

$(document).ready(function(){
    $("a.link").click(function(){
        $(".testVid").show();
        $(".testVid2").hide();
        $(".testVid3").hide();
        $(".testVid4").hide();
        $(".testVid5").hide();
        $(".testVid6").hide();
        $(".testVid7").hide();
        $(".testVid8").hide();
    });
    $(".close").click(function(){
        $(".testVid").hide();
        });

    $("a.link2").click(function(){
        $(".testVid2").show();
        $(".testVid").hide();
        $(".testVid3").hide();
        $(".testVid4").hide();
        $(".testVid5").hide();
        $(".testVid6").hide();
        $(".testVid7").hide();
        $(".testVid8").hide();
    });
    $(".close2").click(function(){
        $(".testVid2").hide();
        });

    $("a.link3").click(function(){
        $(".testVid3").show();
        $(".testVid2").hide();
        $(".testVid").hide();
        $(".testVid4").hide();
        $(".testVid5").hide();
        $(".testVid6").hide();
        $(".testVid7").hide();
        $(".testVid8").hide();
    });
    $(".close3").click(function(){
        $(".testVid3").hide();
        });

    $("a.link4").click(function(){
        $(".testVid4").show();
        $(".testVid2").hide();
        $(".testVid3").hide();
        $(".testVid").hide();
        $(".testVid5").hide();
        $(".testVid6").hide();
        $(".testVid7").hide();
        $(".testVid8").hide();
    });
    $(".close4").click(function(){
        $(".testVid4").hide();
        });

    $("a.link5").click(function(){
        $(".testVid5").show();
        $(".testVid2").hide();
        $(".testVid3").hide();
        $(".testVid4").hide();
        $(".testVid").hide();
        $(".testVid6").hide();
        $(".testVid7").hide();
        $(".testVid8").hide();
    });
    $(".close5").click(function(){
        $(".testVid5").hide();
        })

    ;$("a.link6").click(function(){
        $(".testVid6").show();
        $(".testVid2").hide();
        $(".testVid3").hide();
        $(".testVid4").hide();
        $(".testVid5").hide();
        $(".testVid").hide();
        $(".testVid7").hide();
        $(".testVid8").hide();
    });
    $(".close6").click(function(){
        $(".testVid6").hide();
        });

    $("a.link7").click(function(){
        $(".testVid7").show();
        $(".testVid2").hide();
        $(".testVid3").hide();
        $(".testVid4").hide();
        $(".testVid5").hide();
        $(".testVid6").hide();
        $(".testVid").hide();
        $(".testVid8").hide();
    });
    $(".close7").click(function(){
        $(".testVid7").hide();
        });

    $("a.link8").click(function(){
        $(".testVid8").show();
        $(".testVid2").hide();
        $(".testVid3").hide();
        $(".testVid4").hide();
        $(".testVid5").hide();
        $(".testVid6").hide();
        $(".testVid7").hide();
        $(".testVid").hide();
    });
    $(".close8").click(function(){
        $(".testVid8").hide();
        });
    $(".hideDiv").css('display', 'none');
});

在这里拨弄

推荐答案

使用jQuery选择器.我将所有类属性都更改为ID属性，并在没有数字的后面附加了1.这是小提琴.

Make use of jQuery selectors. I changed all your class attributes to ID attributes, and I appended a 1 to the ones without a number. Here's the Fiddle.

http://jsfiddle.net/BLXWS/7/

这篇关于显示/隐藏多个div的更好方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！