使用jQuery切换元素显示，如何初始仅展示Home模块？

有几种简单的方案可以实现页面加载时只显示Home对应的区块，其他区块默认隐藏：

方案1：通过CSS直接初始隐藏非Home区块 #

直接在你的<style>标签里添加以下样式，让Slide_sub01和Slide_sub02初始就隐藏：

#Slide_sub01, #Slide_sub02 {
    display: none;
}

这种方法最直接，不需要额外的JS代码，页面加载完成后就会自动隐藏这两个区块，只显示Home。

方案2：利用现有函数，页面加载时自动调用changeMenu('home') #

在你的jQuery脚本里添加DOM就绪事件，页面加载完成后自动执行切换到Home的逻辑，复用你已经写好的changeMenu函数：

$(document).ready(function() {
    changeMenu('home');
});

把这段代码放到现有的<script>标签里，和changeMenu函数同级即可。这样页面加载完成后会自动触发一次切换，隐藏其他区块，只显示Home。

方案3：给所有Slide区块加统一类名，优化扩展性 #

如果以后可能会添加更多的Slide区块，这种方法更便于维护：

1. 给所有Slide区块添加共同的类，比如slide-section：

<div id="Slide_home" class="slide-section">home</div>
<div id="Slide_sub01" class="slide-section">01</div>
<div id="Slide_sub02" class="slide-section">02</div>

2. 在CSS里设置这个类默认隐藏，再单独设置Home区块显示：

.slide-section {
    display: none;
}
#Slide_home {
    display: block;
}

同时你还可以优化changeMenu函数，不用逐个写ID，直接通过类选择器批量隐藏：

function changeMenu(menu){
    $('.slide-section').css({'display':'none'});  
    $('#Slide_'+menu).css({'display':'block'});
}

这样后续新增Slide区块时，只要加上slide-section类就行，不用修改函数和初始隐藏的CSS。

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