![](/img/trans.png)
[英]Calling 'destroy' on dropdownchecklist not working in jQuery 2.1.3
[英]Tabs structure working in jquery 2.1.3, showing error in 3.6.0
未捕获的错误:语法错误,无法识别的表达式:[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>
为什么我会遇到这样的问题? 当我激活旧版本时它可以工作,但是当我尝试更新时我遇到了问题。 谢谢
似乎存在报价问题。 你有:
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>
这不会生成您报告的错误。
Jquery 3.0 不推荐使用的绑定函数
// your code
$(window).bind('hashchange', function(){
tab.trigger('click');
});
// change to
$(window).on('hashchange', function(){
tab.trigger('click');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.