jQuery点击切换显示隐藏div时如何设置默认选中并展示的项

解决方案 #

方案1：直接修改HTML添加默认状态（无需改动JS逻辑） #

• 给第一个选项的.showSingle元素额外添加greenactive类，实现默认选中样式
• 将第一个目标容器#div01的display:none改为display:block，实现默认显示
  修改后的HTML对应代码如下：

<!-- 第一个选项添加greenactive类 -->
<a href="#"><div style="display: inline-block;" class="showSingle greenactive" target="01">Selection1</div></a>
<a href="#"><div style="display: inline-block;" class="showSingle" target="02">Selection2</div></a>
<a href="#"><div style="display: inline-block;" class="showSingle" target="03">Selection3</div></a>

<!-- 第一个目标容器修改display属性为block -->
<div id="div01" class="targetDiv" style="display:block">
Target01 Content
</div>
<div id="div02" class="targetDiv" style="display:none">
Target02 Content
</div>
<div id="div03" class="targetDiv" style="display:none">
Target03 Content
</div>

方案2：JS初始化自动触发第一次点击（推荐，无需改动HTML结构） #

在原有JS代码末尾新增一行，主动触发第一个选项的点击事件，复用已有的切换逻辑，避免HTML和JS逻辑重复修改：

$('.showSingle').click(function () {
    $('.targetDiv').hide();
    $('.showSingle').removeClass('greenactive');
    $(this).addClass("greenactive")
    $('#div' + $(this).attr('target')).show();
});
// 新增以下代码，初始化触发第一个选项点击
$('.showSingle').first().click();

额外优化提示 #

你当前的CSS代码存在语法错误，建议修正：

• 多处冗余的color: #;无效属性可直接删除
• .showSingle类的background-color: #ffffff末尾缺少分号，会导致后续属性不生效，修正后如下：

.greenactive {
    background-color: green;
    border-radius: 25px;
    padding: 10px;
    color: #fff;
    font-size: 14px;
}

.showSingle {
    background-color: #ffffff;
    border-radius: 25px;
    padding: 10px;
    font-size: 14px;
}

.showSingle:hover {
    background-color: #e4e6e8;
    border-radius: 25px;
    padding: 10px;
    color: #535a60;
    font-size: 14px;
}

内容的提问来源于stack exchange，提问作者r0naldinio