Tabs structure working in jquery 2.1.3, showing error in 3.6.0-CodePudding

Uncaught Error: Syntax error, unrecognized expression: [href=#technical]

tabs.js files

$(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 files

<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>

Why am I having such a problem? It works when I activate the old version, but when I try to update I have a problem. thank you

CodePudding user response：

There appears to be a Quote issue. You have:

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

So the Selector become:

[href=#overview]

I believe you want to correct the selector to the following:

[href='#overview']

Consider the following.

$(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>

this does not generate the error you reported.

CodePudding user response：

Jquery 3.0 deprecated bind function

  // your code 

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

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