Question

我是j Query的新手。我正在尝试打开与ID为“#employee”的div中的每个列表项相关的内容。 id“#details”应该一次打开1个项目并隐藏其他项目。我试着解决这个问题，但由于我的知识不足，我无法做到。

    <div>
    <div class="details">
        <div id="employee1"><h2>Employee 1</h2><p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature </p></div>
    </div>
    <div class="details">
        <div id="employee2"><h2>Employee 2</h2><p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum</p></div>
    </div>
    <div class="details">
        <div id="employee3"><h2>Employee 3</h2><p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum</p></div>
    </div>
    <div class="details">
        <div id="employee4"><h2>Employee 4</h2><p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum</p></div>
    </div>                        
    <div class="thumbs">
        <ul> 
            <li id="employee1">Employe 1</li>
            <li id="employee2">Employe 2</li>                
            <li id="employee3">Employe 3</li>
            <li id="employee4">Employe 4</li>
        </ul>
    </div>

</div>

$(document).ready(function () {
    $("li").click(function () {
        var divname = this.html();
        $("#employee").show("slow").siblings().hide("slow");
    });
});

Answer 1

这可以通过简单的HTML和CSS完成，不需要JavaScript。但是当然JavaScript需要一些不错的效果。这就是我为我的案子所做的。

首先固定容器的高度，这样它一次只能显示一个项目并隐藏其他项目。为此，我使用以下CSS代码

#container {
height: 100px;
width: 500px;
margin: auto;
overflow: hidden;
position: relative;}

HTML外观是：

<div class="wrapper">
<div id="container">
    <div class="details">
        <div id="employee1"><h2>Employee 1</h2><p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature </p></div>
    </div>
    <div class="details">
        <div id="employee2"><h2>Employee 2</h2><p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum</p></div>
    </div>
    <div class="details">
        <div id="employee3"><h2>Employee 3</h2><p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum</p></div>
    </div>
    <div class="details">
        <div id="employee4"><h2>Employee 4</h2><p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum</p></div>
    </div>
</div>
<div class="thumbs">
    <ul> 
        <li><a href="#employee1">Employe 1</a></li>
        <li><a href="#employee2">Employe 2</a></li>                
        <li><a href="#employee3">Employe 3</a></li>
        <li><a href="#employee4">Employe 4</a></li>
    </ul>
</div>
</div>

Here is the demo

使用jquery打开与每个列表项相关的内容

1 个答案: