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

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>

这是演示