如何实现锚链接跳转后自动显示hover触发的对应span元素内容？

问题说明 #

我设计了一个包含5个span元素的页面，鼠标悬停这些span时会触发对应内容显示，页面默认加载时显示Income Planning内容。现在需要实现：当用户通过锚链接（如#tax）跳转至该页面时，自动展示对应span元素的内容，而非默认内容。

解决方案 #

可以通过读取页面URL的哈希值（anchor），在页面加载时自动触发对应内容的显示逻辑，具体步骤如下：

• 获取URL哈希值并处理：从window.location.hash中提取锚点名称，去除开头的#符号
• 匹配对应的span元素：根据哈希值找到页面中对应类名的span元素
• 触发内容切换逻辑：如果找到匹配的span，执行和鼠标悬停时相同的内容切换操作，包括切换背景和显示对应文本区域

注意：当前代码中存在锚点与内容区域的对应偏差（比如锚点#tax对应的span.tax关联的是Long-Term Care Planning内容，而你提到的Tax Reduction Strategies对应的是#legacy-text和span.legacy），需要先确认锚点和内容的对应关系是否正确，避免逻辑混乱。

修改后的完整代码 #

<section id="approach">
    <div class="containerr">
        <div class="clear"></div>
        <div class="col-lg-06 col-md-6 col-sm-6">
            <div id="approach-diagram" class="retiremet-bg">
                <span class="retirement"></span>
                <span class="social"></span>
                <span class="legacy"></span>
                <span class="tax"></span>
                <span class="five"></span>
            </div>
        </div>
        <div class="col-lg-006 col-md-6 col-sm-6">
            <div id="retirement-text" class="approach-text" style="display: block" >
                <div class="cavt"> <i class="fas fa-caret-right"></i></div><div>  <h2>Income Planning </h2></div>
                <p>The experienced professionals at Suncrest Advisors will help you decide how much and where to save your income to create the most robust and sustainable retirement income for your future.  This is the foundation of ensuring a comfortable and sustainable lifestyle in retirement.</p>  
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options" id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review" style="margin-top:18px;"><span class="fusion-button-text">Let's Get Started!</span></a>              
</div>
            <div id="social-text" class="approach-text">
                      <div class="cavt"> <i class="fas fa-caret-right"></i></div><div> <h2>Investment Management</h2></div>
                <p>A reliable investment plan can help secure your retirement. In building and actively managing our client's wealth, we parlay our firm’s stellar research and analysis into having solid long-term conviction around exactly which stock and bonds to own, and why.   </p>  
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options"  id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review" style="margin-top:18px;"><span class="fusion-button-text">Let's Get Started!</span></a>              
</div>
<div id="legacy-text" class="approach-text">
                     <div class="cavt"> <i class="fas fa-caret-right"></i></div><div> <h2>Tax Reduction Strategies</h2></div>
                <p>When applied appropriately in conjunction with a financial plan, tax planning strategies can help offset the impact of taxes on investment returns and other income.  Our financial planning team can work in conjunction with your other professionals to coordinate the most comprehensive plan for your future.      </p> 
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options"  id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review"  style="margin-top:18px;"><span class="fusion-button-text">Let's Get Started!</span></a>              
</div>
          
            <div id="tax-text" class="approach-text">
                     <div class="cavt"> <i class="fas fa-caret-right" ></i></div><div> <h2>Long-Term Care Planning</h2></div>
                <p>Long-Term Care Planning aids in planning for life transitions. We work with our clients to make informed decisions regarding how to plan for long-term care expenses and determine the best method of payment, such as: private pay, or Medicaid.  </p>  
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options"  id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review"  style="margin-top:18px;"><span class="fusion-button-text">Let's Get Started!</span></a>              
</div>
            <div id="five-text" class="approach-text">
                     <div class="cavt"> <i class="fas fa-caret-right" ></i></div><div> <h2>Legacy Planning</h2></div>
                <p>Our careful Legacy Planning can help you pass on much of your hard-earned wealth to your family or your favorite charities without the government’s involvement.  The earlier you explore your options, the better you will be positioned to enhance your legacy.   </p>  
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options" id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review"  style="margin-top:18px;"><span class="fusion-button-text">Let's Get Started!</span></a>              
</div>
              </div>
        </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
var parentEl = jQuery('#approach-diagram').attr('class');

// 鼠标悬停切换背景
jQuery('#approach-diagram span').on('mouseover', function() {
  var hoverEl = jQuery(this).attr('class');
  jQuery('#approach-diagram').attr('class', hoverEl + '-bg');
});

// 离开区域恢复原背景
jQuery('#approach-diagram').on('mouseleave', function() {
  jQuery('#approach-diagram').attr('class', parentEl);
});

// 鼠标进入切换内容
jQuery('#approach-diagram span').on('mouseenter', function() {
  var clickEl = jQuery(this).attr('class');
  jQuery('#approach-diagram').attr('class', clickEl + '-bg');
  jQuery('.approach-text').slideUp();
  jQuery('#' + clickEl + '-text').slideDown();
  parentEl = clickEl + '-bg';
});

// 页面加载时检查锚点并切换内容
jQuery(document).ready(function() {
    var hash = window.location.hash.slice(1); // 去除#号
    if(hash && jQuery('#approach-diagram span.' + hash).length) {
        // 触发对应span的mouseenter事件
        jQuery('#approach-diagram span.' + hash).trigger('mouseenter');
    }
});
    </script>
</section>

关键修改说明 #

• 移除了span.tax外层的a标签，避免锚点跳转干扰内容切换逻辑
• 添加了页面加载时的锚点检测逻辑：
  • 提取URL中的哈希值
  • 如果存在对应类名的span元素，自动触发其mouseenter事件，实现内容自动切换

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