Question

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

我尽我所能，但我无法弄清楚如何让其他人进入我的图库保持活动状态（红色边框），并在页面加载时隐藏团队成员的其他描述。（在页面加载时向下滚动以查看我的意思。）

这是我正在使用的代码。

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

在定义单击处理程序后，尝试在目录的第一个元素上模拟单击事件：

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

        $(".staffSelected").fadeOut(500, function () {
            $(this).removeClass('staffSelected');
            $(newMember).fadeIn(500).addClass('staffSelected');
        });
    });

    $("#staffDirectory ul li:first-child").click();
});

Answer 2

首先关闭所有：红色边框。
的 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); }); });

隐藏div并突出显示所选缩略图以激活

2 个答案: