-1

私はjクエリが初めてです。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");
    });
});
4

1 に答える 1

0

これは単純な HTML と CSS で実行でき、JavaScript は必要ありません。もちろん、いくつかの素晴らしい効果には JavaScript が必要です。これは私が私のケースのためにしたことです。

最初にコンテナの高さを修正して、一度に 1 つのアイテムのみを表示し、他のアイテムを非表示にできるようにしました。このために、次の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>

ここにデモがあります

于 2013-07-18T15:09:15.830 に答える