jquery隐藏全部并显示子项

我有链接，当你点击它时，它会显示特定的

div

，其余的隐藏起来。这一切都很好，但它的编码全部手动一个接一个。看

有没有更好的方法可以用一个适用于所有

div

的简单脚本对其进行编码

谢谢

<div class="kosa">
<div id="video0"><h5>Introduction</h5>  
Intro
</div>          
<div id="video1"><h5>Install </h5>  
Install
</div>
<div id="video2"><h5>Authorize with Adobe ID</h5>
Authorize
</div>
<div id="video3"><h5>Add a Library</h5>
Add Lib
</div>
<div id="video4"><h5>Borrow titles</h5>
Borrow
</div>
<div id="video5"><h5>Download</h5>
Download
</div>
<div id="video6"><h5>Read eBooks</h5>
Read
</div>
<div id="video7"><h5>Delete, Return, & Share</h5>
Del
</div>
<div id="video8"><h5>One</h5>
One
</div>
</div>
       <div class="related">    
            <h5>Related Videos</h5>
            <span id="link0"><i class="icon-video"></i> Introduction</span>
            <span id="link1"><i class="icon-video"></i> Install</span>
            <span id="link2"><i class="icon-video"></i> Authorize with Adobe ID</span>
            <span id="link3"><i class="icon-video"></i> Add a Library</span>
            <span id="link4"><i class="icon-video"></i> Borrow titles</span>
            <span id="link5"><i class="icon-video"></i> Download</span>
            <span id="link6"><i class="icon-video"></i> Read eBooks</span>
            <span id="link7"><i class="icon-video"></i> Delete, Return, & Share</span>
            <span id="link8"><i class="icon-video"></i> One</span>
         </div>

$(function() {      
        $('#video1,#video2,#video3,#video4,#video5,#video6,#video7,#video8').hide();   
        $('#link0').click(function () {$('#video0').show();$('#video1,#video2,#video3,#video4,#video5,#video6,#video7,#video8').hide(); });
        $('#link1').click(function () {$('#video1').show();$('#video0,#video2,#video3,#video4,#video5,#video6,#video7,#video8').hide(); });
        $('#link2').click(function () {$('#video2').show();$('#video0,#video1,#video3,#video4,#video5,#video6,#video7,#video8').hide(); });
        $('#link3').click(function () {$('#video3').show();$('#video0,#video1,#video2,#video4,#video5,#video6,#video7,#video8').hide(); });
        $('#link4').click(function () {$('#video4').show();$('#video0,#video1,#video2,#video3,#video5,#video6,#video7,#video8').hide(); });
        $('#link5').click(function () {$('#video5').show();$('#video0,#video1,#video2,#video3,#video4,#video6,#video7,#video8').hide(); });
        $('#link6').click(function () {$('#video6').show();$('#video0,#video1,#video2,#video3,#video4,#video5,#video7,#video8').hide(); });
        $('#link7').click(function () {$('#video7').show();$('#video0,#video1,#video2,#video3,#video4,#video5,#video6,#video8').hide(); });
        $('#link8').click(function () {$('#video8').show();$('#video0,#video1,#video2,#video3,#video4,#video5,#video6,#video7').hide(); });
        });

介绍
简介
安装
安装
使用Adobe ID进行授权
授权
添加库
添加库
借书
借
下载
下载
阅读电子书
阅读
删除、返回和共享
德尔
一个
一个
相关视频
介绍
安装
使用Adobe ID进行授权
添加库
借书
下载
阅读电子书
删除、返回和共享
一个
$（函数（）{
$（'视频1，'视频2，'视频3，'视频4，'视频5，'视频6，'视频7，'视频8'）。隐藏（）；
$（'链接0'）。单击（函数（）{$（'视频0'）。显示（）；$（'视频1，'视频2，'视频3，'视频4，'视频5，'视频6，'视频7，'视频8'）。隐藏（）；
$（'链接1'）。单击（函数（）{$（'视频1'）。显示（）；$（'视频0，'视频2，'视频3，'视频4，'视频5，'视频6，'视频7，'视频8'）。隐藏（））；
$（'链接2'）。单击（函数（）{$（'视频2'）。显示（）；$（'视频0，'视频1，'视频3，'视频4，'视频5，'视频6，'视频7，'视频8'）。隐藏（））；
$（'链接3'）。单击（函数（）{$（'视频3'）。显示（）；$（'视频0，'视频1，'视频2，'视频4，'视频5，'视频6，'视频7，'视频8'）。隐藏（））；
$（'链接4'）。单击（函数（）{$（'视频4'）。显示（）；$（'视频0，'视频1，'视频2，'视频3，'视频5，'视频6，'视频7，'视频8'）。隐藏（））；
$（'链接5'）。单击（函数（）{$（'视频5'）。显示（）；$（'视频0，'视频1，'视频2，'视频3，'视频4，'视频6，'视频7，'视频8'）。隐藏（））；
$（'链接6'）。单击（函数（）{$（'视频6'）。显示（）；$（'视频0，'视频1，'视频2，'视频3，'视频4，'视频5，'视频7，'视频8'）。隐藏（））；
$（'链接7'）。单击（函数（）{$（'视频7'）。显示（）；$（'视频0，'视频1，'视频2，'视频3，'视频4，'视频5，'视频6，'视频8'）。隐藏（））；
$（'链接8'）。单击（函数（）{$（'视频8'）。显示（）；$（'视频0，'视频1，'视频2，'视频3，'视频4，'视频5，'视频6，'视频7'）。隐藏（））；
});

我将使用以下属性：

<span id="link0" data-video="video0"><i class="icon-video"></i> Introduction</span>

这种方法比使用

.eq

功能更灵活，这将迫使您在每次编辑时移动div并确保它们的顺序正确。这还允许您在需要时链接到具有多个跨距的同一个div

我将使用以下属性：

<span id="link0" data-video="video0"><i class="icon-video"></i> Introduction</span>

这种方法比使用

.eq

功能更灵活，这将迫使您在每次编辑时移动div并确保它们的顺序正确。这还允许您在需要时链接到具有多个跨距的同一个div

---

使用css

类名

（）：

---

使用css

classNames

（）：

Css更改：

.kosa div{
    padding:40px;
    background:#ccc; 
    display: none; // Included
}

jsFiddle：

Css更改：

.kosa div{
    padding:40px;
    background:#ccc; 
    display: none; // Included
}

---

jsFIDLE:

今天早些时候用class代替idI问了一个类似的问题，检查我得到的答案是否很好…今天早些时候用class代替idI问了一个类似的问题，检查我得到的答案是否很好…我将自己发布一个答案，但这太接近了，我将解释为什么我的答案会不同。使用

this.id.replace（“link”，“video”）

这样，如果页面上有10个以上的视频，就可以使用它了；）@SamotnyPocitac-很高兴能帮上忙。我本来打算自己发布一个答案，但这太接近了，我只想解释一下为什么我的答案会有所不同。使用

this.id.replace（“link”，“video”）

这样，如果页面上有10个以上的视频，就可以使用它了；）@SamotnyPocitac-很高兴能帮忙。

$(function() {      
    $("span").click(function(){
        $("div.kosa").find("div#video").html($(this).text());
    });
});

jQuery (".kosa")    .find ("div:first-child")
                    .css ("display", "block");

jQuery (".related")    .find ("span")
.click (function () {
       $idNo = jQuery (this).attr ('id').substring(4); 
    jQuery (".kosa")    .find ("div")
                        .css ("display", "none");

    jQuery (".kosa")    .find ("#video" + $idNo)
                        .css ("display", "block");
});

.kosa div{
    padding:40px;
    background:#ccc; 
    display: none; // Included
}