javascript - 隐藏 div 并突出显示选定的缩略图以激活

Question

我正在创建一个团队成员页面，我使用这个线程来帮助我一点点。

Fade Out/Fade In of List Items

我的一切都按我想要的方式工作，除了我不知道如何让其他人我的图库保持事件状态(红色边框)并在页面加载时隐藏团队成员的其他描述。 (在页面加载时向下滚动以了解我的意思。)

这是我正在使用的代码。

HTML

<div class="grid_6">
    <div id="staffDirectory">
        <ul class="team list-image clearfix">
        <li class="selectedMember">
            <img src="images/team/head1.jpg" class="max-img headshots" />
        </li>
        <li><img src="images/team/head2.jpg" class="max-img headshots" /></li>
        <li><img src="images/team/head3.jpg" class="max-img headshots" /></li>
        ...
        </ul>
    </div>
</div><!--End 6-->

<div class="grid_6">

<div id="staffMember">
<ul>
    <li class="staffSelected">
        <div class="box white-bg">
        <img src="images/team/head1.jpg" class="headshots-red" />
        <h2 class="red3-tx bold">John Doe 1</h2>
        <h3 class="blue4-tx" style="font-weight:400; font-style:italic;">Position: Manager</h3>
        <p class="blue3-tx">text</p>
        </div>
    </li>
    ...
</ul>
</div>

CSS

#staffDirectory ul li
{
    opacity: 0.9;
}

#staffDirectory li:hover{
    opacity: 1;
}

.selectedMember {
    opacity: 1.0 !important;
}

.staffSelected {
    display: inherit;
}

#staffMember li:not(.staffSelected) {
    display: none;
}

.team li{
    display:inline-block;
    float:left;
    margin-bottom: 10px;
    margin-right: 8%;
    width:28%;
    cursor: pointer;    
}

.headshots{
    border:5px solid #034A68;
}

.headshots:hover{
border:5px solid #981B1E;   

}

.headshots:active{
    border:5px solid #981B1E;
}

.headshots-red{
    border:5px solid #981B1E;
    margin-bottom:25px;
    height: auto;
    width: 98%; 
}

JS

  <script>
$(document).ready(function()
{
    $("#staffDirectory ul li").click(function()
    {
        var index = $("#staffDirectory ul li").index(this);
        var newMember = null;
        newMember = $("#staffMember ul li").get(index);

        $(".staffSelected").fadeOut(500); 

        setTimeout(function() {
            $(newMember).fadeIn(500).addClass('staffSelected');
        }, 500);
    });
});
</script>

抱歉，代码很笨，只是不确定问题出在哪里。任何帮助，将不胜感激。谢谢。

编辑!!!工作版本这是该员工图库的完整工作版本。感谢帮助我的人。希望其他人能发现这很有用。 http://codepen.io/daugaard47/pen/ctHru

Answer 1

首先:红色边框。
CSS

.selectedMember>img {
     border-color: #981B1E;
}

第二:隐藏未选中的团队成员
CSS

#staffMember li {
   display:none;
}

#staffMember li.staffSelected {
   display:inherit;
}

请注意，您使用“staffSelected”类创建了第二个#staffMember。只有第一个必须拥有它..

编辑试试这个 JS 脚本:

$(document).ready(function()
{
    $("#staffDirectory ul li").click(function()
    {
        var index = $("#staffDirectory ul li").index(this);
        $('.staffSelected').fadeOut(500);
        $('.selectedMember').removeClass('selectedMember');
        $(this).addClass('selectedMember');

        setTimeout(function() {
            $('.staffSelected').removeClass('staffSelected');
            $("#staffMember ul li:eq("+index+")").fadeIn(500).addClass('staffSelected');
        }, 500);
    });
});