基于下拉选择显示/隐藏网站板块：jQuery代码适配疑问

要把示例代码改成适配自己页面板块的显示/隐藏功能，只需要对应替换几个关键部分就行，步骤如下：

1. 调整下拉选单的选项 #

把下拉选单里的选项文本和value值换成你自己的板块名称和对应ID。注意**value属性必须和你要显示的板块ID完全一致**，比如：

<Select id="section-selector">
   <option value="user-profile">用户资料</option>
   <option value="order-history">订单历史</option>
   <option value="settings">账户设置</option>
</Select>

2. 替换页面板块的HTML #

把原来的颜色div换成你自己的页面板块，每个板块的id要和下拉选项的value一一对应，同时给所有板块加一个统一的类名（比如sections），初始设置display:none隐藏：

<div id="user-profile" class="sections" style="display:none">
  <!-- 这里是用户资料板块的内容 -->
  姓名：XXX<br>
  邮箱：xxx@example.com
</div>
<div id="order-history" class="sections" style="display:none">
  <!-- 这里是订单历史板块的内容 -->
  订单1：2024-05-01 购买商品A<br>
  订单2：2024-04-25 购买商品B
</div>
<div id="settings" class="sections" style="display:none">
  <!-- 这里是账户设置板块的内容 -->
  修改密码<br>
  绑定手机号
</div>

3. 修改jQuery代码的选择器 #

把代码里的下拉选单ID和板块类名换成你自己设置的：

$(function() {
    $('#section-selector').change(function(){
        $('.sections').hide();
        $('#' + $(this).val()).show();
    });
});

完整改造后的代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="section-selector">
   <option value="user-profile">用户资料</option>
   <option value="order-history">订单历史</option>
   <option value="settings">账户设置</option>
</Select>
<div id="user-profile" class="sections" style="display:none">
  姓名：XXX<br>
  邮箱：xxx@example.com
</div>
<div id="order-history" class="sections" style="display:none">
  订单1：2024-05-01 购买商品A<br>
  订单2：2024-04-25 购买商品B
</div>
<div id="settings" class="sections" style="display:none">
  修改密码<br>
  绑定手机号
</div>

<script>
$(function() {
    $('#section-selector').change(function(){
        $('.sections').hide();
        $('#' + $(this).val()).show();
    });
});
</script>

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