Question

我有三个有自己ID的子div。在这三个子div的父div之下是三个类，每个类都有段落，其中讨论了每个子div的信息。

当我点击其中一个子id id时，我想要一个正确的类，其中包含被点击的div的段落信息。以下是我到目前为止的情况：

这是我开始的jsfiddle：http://jsfiddle.net/kfe126w1/

如果你不想去看js小提琴，这是代码：

HTML：

<div class="main"</div>
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
    <div id="clear"></div>
</div>

<div class="info">
    <h1>Title of left id div</h1>
    <h2>Sub title of left id div</h2>
    <p>This is a paragraph about the left id div</p>
    <p>This is another paragraph about the left id div</p>
</div>

<div class="info">
    <h1>Title of middle id div</h1>
    <h2>Sub title of middle id div</h2>
    <p>This is a paragraph about the middle id div</p>
    <p>This is another paragraph about the middle id div</p>
</div>

<div class="info">
    <h1>Title of right id div</h1>
    <h2>Sub title of right id div</h2>
    <p>This is a paragraph about the right id div</p>
    <p>This is another paragraph about the right id div</p>
</div>

CSS：

.main{
    width:100%;
}

#left{
    width:100px;
    height:100px;
    /* An image sprite will go here and also a hover id #left:hover below  */
    background-color:blue;
    float:left;
    margin-right:10px;
}

#middle{
    width:100px;
    height:100px;
    /* An image sprite will go here and also a hover id #middle:hover below  */
    background-color:red;
    float:left;
    margin-right:10px;
}

#right{
    width:100px;
    height:100px;
    /* An image sprite will go here and also a hover id #right:hover below  */
    background-color:yellow;
    float:left;
}

#clear{
    clear:both;
}

.info{
    border-top: 1px solid black; 
    margin-top:10px;
}

JS / jQuery的：

$(document).ready(function(){
    $('.info').hide();
});

将不胜感激任何帮助。谢谢！

Answer 1

根据id：

为每个信息div添加一个类

<div class="main">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
    <div id="clear"></div>
</div>

<div class="info left">
    <h1>Title of left id div</h1>
    <h2>Sub title of left id div</h2>
    <p>This is a paragraph about the left id div</p>
    <p>This is another paragraph about the left id div</p>
</div>

<div class="info middle">
    <h1>Title of middle id div</h1>
    <h2>Sub title of middle id div</h2>
    <p>This is a paragraph about the middle id div</p>
    <p>This is another paragraph about the middle id div</p>
</div>

<div class="info right">
    <h1>Title of right id div</h1>
    <h2>Sub title of right id div</h2>
    <p>This is a paragraph about the right id div</p>
    <p>This is another paragraph about the right id div</p>
</div>

添加处理悬停的功能：

$('.main div').hover(function(){
    $('.info').hide(); //Hide them all
    var id = $(this).attr('id'); //Get the clicked div id
    $('.' + id ).show(); //Show the div you want according to id
});

Answer 2

将类添加到相应的info div。因此，在代表左侧内容的信息部分中，添加一个＆＃34; left＆＃34;等等......等等。同时添加一个＆＃39;部分＆＃39;类（例如）每个div负责切换信息的内容。然后在JavaScript中，您基本上将为此.section类设置一个单击处理程序，并根据您设置的类进行切换。通过代码看到这一点要容易得多，所以你就是这样！

<div class="main">
    <div class="section" id="left"></div>
    <div class="section" id="middle"></div>
    <div class="section" id="right"></div>
    <div id="clear"></div>
</div>
<div class="info left"></div>
<div class="info middle"></div>
<div class="info right"></div>

在JavaScript中，执行以下操作：

$('.section').on("click", function() {
    var info_class = $(this).attr("id");
    $('.' + info_class).toggle();
}

Answer 3

this你还在寻找什么？

标记：

<div class="main"</div>
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
    <div id="clear"></div>
</div>

<div class="info left">
    <h1>Title of left id div</h1>
    <h2>Sub title of left id div</h2>
    <p>This is a paragraph about the left id div</p>
    <p>This is another paragraph about the left id div</p>
</div>

<div class="info middle">
    <h1>Title of middle id div</h1>
    <h2>Sub title of middle id div</h2>
    <p>This is a paragraph about the middle id div</p>
    <p>This is another paragraph about the middle id div</p>
</div>

<div class="info right">
    <h1>Title of right id div</h1>
    <h2>Sub title of right id div</h2>
    <p>This is a paragraph about the right id div</p>
    <p>This is another paragraph about the right id div</p>
</div>

JavaScript的：

$(document).ready(function(){
    $('.info').hide();
});

$('.main').on('click', function(e){
    $('.info').hide();
    $('.'+e.target.id).show();
});

获取正确的段落以显示某个div何时悬停

3 个答案: