选项卡结构在 jquery 2.1.3 中工作，在 3.6.0 中显示错误

Posted 2023-05-08

【中文标题】选项卡结构在 jquery 2.1.3 中工作，在 3.6.0 中显示错误

【英文标题】：Tabs structure working in jquery 2.1.3, showing error in 3.6.0

【发布时间】：2021-09-08 08:40:38

【问题描述】：

未捕获的错误：语法错误，无法识别的表达式：[href=#technical]

tabs.js 文件

$(function() 
    var tab = $('.tab a'),
        content = $('.tab-content');
    if ( location.hash )
        tab.filter('[href='+location.hash+']').addClass('active');
        content.hide().filter(location.hash).show().fadeIn();
       else       
        tab.filter(':first').addClass('active');
        content.filter(':not(:first)').hide();
    
    tab.click(function()
        if( location.hash )
            var id = location.hash;
           else    
            var id = $(this).attr('href');
        
        tab.removeClass('active').filter('[href='+id+']').addClass('active');
        content.hide().filter(id).show();
    );
    $(window).bind('hashchange', function()
        tab.trigger('click');
    );
);

tabs.php 文件

<div class="tab">
    <a href="#overview">Overview</a>
    <a href="#features">Features</a>
    <a href="#articles">Articles</a>
    <a href="#technical">Technical</a>
</div>


    <div id="overview"  class="tab-content">
    <p>echo..</p>
    </div>
    <div id="features"  class="tab-content">
    <p>echo..</p>
    </div>  
    <div id="articles"  class="tab-content">
    <p>echo..</p>
    </div>       
    <div id="technical" class="tab-content">
    <p>echo..</p>
    </div>

为什么我会遇到这样的问题？当我激活旧版本时它可以工作，但是当我尝试更新时出现问题。谢谢你

【问题讨论】：

您需要将属性值用引号引起来，因为它包含# 字符。

【参考方案1】：

似乎存在报价问题。你有：

tab.removeClass('active').filter('[href='+id+']').addClass('active');

所以选择器变成：

[href=#overview]

我相信您想将选择器更正为以下内容：

[href='#overview']

考虑以下内容。

$(function() 
  var tab = $('.tab a'),
    content = $('.tab-content');
  if (location.hash) 
    tab.filter("[href='" + location.hash + "']").addClass('active');
    content.hide().filter(location.hash).show().fadeIn();
   else 
    tab.filter(':first').addClass('active');
    content.filter(':not(:first)').hide();
  
  tab.click(function() 
    if (location.hash) 
      var id = location.hash;
     else 
      var id = $(this).attr('href');
    
    tab.removeClass('active').filter("[href='" + id + "']").addClass('active');
    content.hide().filter(id).show();
  );
  $(window).on('hashchange', function() 
    tab.trigger('click');
  );
);

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="tab">
  <a href="#overview">Overview</a>
  <a href="#features">Features</a>
  <a href="#articles">Articles</a>
  <a href="#technical">Technical</a>
</div>


<div id="overview" class="tab-content">
  <p>echo..</p>
</div>
<div id="features" class="tab-content">
  <p>echo..</p>
</div>
<div id="articles" class="tab-content">
  <p>echo..</p>
</div>
<div id="technical" class="tab-content">
  <p>echo..</p>
</div>

这不会产生您报告的错误。

【参考方案2】：

Jquery 3.0 已弃用绑定函数

  // your code 

    $(window).bind('hashchange', function()
        tab.trigger('click');
    );

   // change to 
    $(window).on('hashchange', function()
        tab.trigger('click');
    );