在Visual Composer切换标签中插入SVG后链接无法正常工作

首先看你提供的代码，目前SVG是通过<img>标签引入的，但没有包裹任何链接标签（<a>）——如果这是你遗漏的部分，第一步得把SVG放进<a>标签里，比如：

<div class="col-md-6"> 
  <p class="main-block-title">IDENTITY MANAGEMENT</p> 
  &nbsp; 
  <a href="你的目标跳转链接">
    <img class="padding-0-20" src="https://salesmate.technobraingroup.com/wp-content/themes/salesmateV1/images/idm_svg_circle edited.svg" />
  </a>
</div>

要是你已经加了<a>标签但链接还是没反应，那大概率是Visual Composer的Tab组件动态渲染DOM时，把链接的点击事件给冲掉了。给你几个实用的解决方法：

• 方法1：手动绑定点击事件
  Visual Composer切换Tab时会重新渲染面板内容，导致原本的链接事件丢失。可以加一段自定义JS，在Tab切换完成后重新绑定点击事件：

  jQuery(document).ready(function($) {
    // 监听Tab切换动作
    $('.vc_tta-tab a').on('click', function() {
      // 延迟300ms确保面板内容加载完成
      setTimeout(function() {
        // 给Tab内的SVG链接绑定跳转逻辑
        $('.vc_tta-panel.active .padding-0-20').parent('a').on('click', function(e) {
          e.preventDefault();
          window.location.href = $(this).attr('href');
        });
      }, 300);
    });
  });
  

  把这段代码贴到主题的“自定义JavaScript”区域，或者用代码片段插件插入就行。

• 方法2：改用内联SVG（Inline SVG）
  外部引入的SVG作为<img>时，在动态切换容器里可能会有交互限制。试试把SVG的代码直接粘贴到页面中，再给它套上链接：

  <div class="col-md-6"> 
    <p class="main-block-title">IDENTITY MANAGEMENT</p> 
    &nbsp; 
    <a href="你的目标跳转链接">
      <!-- 这里直接粘贴SVG的完整代码 -->
      <svg class="padding-0-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
        <!-- 你的SVG内容，比如路径、形状等 -->
      </svg>
    </a>
  </div>
  

  这种方式能避免外部资源加载的问题，链接稳定性会更好。

• 方法3：关闭Tab的AJAX加载
  有些Visual Composer的Tab组件有AJAX加载选项，开启后会动态拉取内容，容易导致链接事件丢失。进入Tab组件的编辑界面，找到“禁用AJAX加载”的选项并开启它（如果有这个设置的话）。

• 方法4：检查CSS的点击限制
  看看你的主题或自定义CSS里，有没有给Tab内的<img>或<a>标签加了pointer-events: none属性——这个属性会让元素无法被点击。如果有的话，覆盖它：

  .vc_tta-panel.active .padding-0-20 {
    pointer-events: auto !important;
  }
  

先确认你已经给SVG加上了<a>标签，再试试上面的方法，应该能解决链接失效的问题。

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