如何通过下拉菜单锚定指定div？URL锚点无法触发显示问题排查

错误原因 #

• 锚点与区块ID不匹配：你使用的URL锚点是#show1，但页面中对应选项的区块ID是showOne，两者名称不一致，浏览器无法定位到目标元素。
• 缺少初始加载时的锚点处理逻辑：当前代码仅在下拉框切换时触发区块显示，页面首次加载时不会自动读取URL锚点并展示对应内容。

修复方案 #

1. 统一锚点与区块ID：将URL锚点改为对应区块的实际ID，比如想显示第一个区块就用#showOne，第二个用#showTwo，以此类推。
2. 添加页面加载时的锚点处理代码：在页面初始化时，读取URL中的锚点值，匹配对应的区块并显示，同时同步下拉框的选中状态。

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>      

<script>
$(document).ready(function(){
    // 处理页面加载时的锚点逻辑
    var hash = window.location.hash.slice(1); // 去掉#号，获取锚点内容
    if(hash && $('#' + hash).length){
        // 匹配到对应区块时，显示它并选中下拉框对应选项
        $(".myDiv").hide();
        $('#' + hash).show();
        // 提取锚点中的后缀（比如showOne提取One）
        var optionValue = hash.replace('show', '');
        $('#myselection').val(optionValue);
    }

    // 原有的下拉框切换逻辑
    $('#myselection').on('change', function(){
        var demovalue = $(this).val(); 
        $(".myDiv").hide();
        $("#show"+demovalue).show();
        // 可选：切换时更新URL锚点
        window.location.hash = 'show' + demovalue;
    });
});
</script> 
<style>
.myDiv{
    display:none;
    padding:10px;
    margin-top:20px;
}  
#showOne{
    border:1px solid red;
}
#showTwo{
    border:1px solid green;
}
#showThree{
    border:1px solid blue;
}
</style> 

<select id="myselection">
    <option>Select Option</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
</select>
<div id="showOne" class="myDiv">
    You have selected option <strong>"One"</strong>.
</div>
<div id="showTwo" class="myDiv">
    You have selected option <strong>"Two"</strong>.
</div>
<div id="showThree" class="myDiv">
    You have selected option <strong>"Three"</strong>.
</div>

额外说明：代码中还添加了下拉框切换时更新URL锚点的逻辑，这样用户切换选项时URL也会同步变化，刷新页面后仍能保持当前选中的状态。

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