[英]jQuery tabs are not clicking when clicked on
I have jQuery tabs using ui 1.10.0. 我有使用ui 1.10.0的jQuery标签。 My first tab is activated by default;
默认情况下,我的第一个标签是激活的; however, I can not get the other 5 tabs to work.
但是,我无法使用其他5个选项卡。 When I click on them, they do nothing and the content that coordinates with tabs doesn't show.
当我单击它们时,它们不执行任何操作,并且不显示与选项卡配合的内容。
Here's the basic HTML code: 这是基本的HTML代码:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabs</title>
<script src="js/jquery-ui-1.10.0.custom.min.js" script type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" script type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery-ui-1.10.0.custom.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="simpaleTabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" >
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active">
<a href="#production" class="ui-tabs-anchor">Production</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#invoices" class="ui-tabs-anchor">Invoices</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#warranty" class="ui-tabs-anchor">Warranty</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#services" class="ui-tabs-anchor">Services</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#parts" class="ui-tabs-anchor">Parts List</a>
</li>
<li class="ui-state-default ui-corner-top"><a href="#memorandums" class="ui-tabs-anchor">Memorandums</a>
</li>
</ul>
<div id="facebook" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
content about Proudction here
</div>
<div id="twitter" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
content about Invoices here
</div>
<div id="linkedin" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
content about Warranty here
</div>
<div id="google" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
content about Services here
</div>
<div id="wikipedia" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
content about Parts List here
</div>
<div id="picasa" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
content about Memorandums here
</div>
</div>
Here's the Javascript: 这是Javascript:
<script>
$(document).ready(function(){
$('#simpaleTabs div').hide();
$('#simpaleTabs div:first').show();
$('#simpaleTabs ul li:first').addclass('active');
$('#simpaleTabs ul li a').click(function(){
$('#simpaleTabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#simpaleTabs div').hide();
$(currentTab).show();
return false;
});
});
</script>
There was one typo mistake in addclass at following line. 在下一行中,addclass中有一个拼写错误。 You have specified addclass instead of addClass.
您指定了addclass而不是addClass。
$('#simpaleTabs ul li:first').addclass('active');
Also following is updated js. 接下来是更新的js。
$(document).ready(function () {
$('#simpaleTabs div').hide();
$('#simpaleTabs div:first').show();
$('#simpaleTabs ul li:first').addClass('active');
$('#simpaleTabs ul li a').click(function () {
$("li").each(function () {
$(this).removeClass('ui-tabs-active');
$(this).removeClass('ui-state-active');
});
$(this).parent().addClass('ui-tabs-active');
$(this).parent().addClass('ui-state-active');
var currentTab = $(this).attr('href');
$('#simpaleTabs div').hide();
$(currentTab).show();
return false;
});
});
Here's Demo Fiddle 这是演示小提琴
Here's corrected HTML if your are interested... 如果您有兴趣,可以在这里更正HTML。
<div id="simpaleTabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active"> <a href="#production" class="ui-tabs-anchor">Production</a>
</li>
<li class="ui-state-default ui-corner-top"> <a href="#invoices" class="ui-tabs-anchor">Invoices</a>
</li>
<li class="ui-state-default ui-corner-top"> <a href="#warranty" class="ui-tabs-anchor">Warranty</a>
</li>
<li class="ui-state-default ui-corner-top"> <a href="#services" class="ui-tabs-anchor">Services</a>
</li>
<li class="ui-state-default ui-corner-top"> <a href="#parts" class="ui-tabs-anchor">Parts List</a>
</li>
<li class="ui-state-default ui-corner-top"><a href="#memorandums" class="ui-tabs-anchor">Memorandums</a>
</li>
</ul>
<div id="production" class="ui-tabs-panel ui-widget-content ui-corner-bottom">content about Proudction here</div>
<div id="invoices" class="ui-tabs-panel ui-widget-content ui-corner-bottom">content about Invoices here</div>
<div id="warranty" class="ui-tabs-panel ui-widget-content ui-corner-bottom">content about Warranty here</div>
<div id="services" class="ui-tabs-panel ui-widget-content ui-corner-bottom">content about Services here</div>
<div id="parts" class="ui-tabs-panel ui-widget-content ui-corner-bottom">content about Parts List here</div>
<div id="memorandums" class="ui-tabs-panel ui-widget-content ui-corner-bottom">content about Memorandums here</div>
</div>
Have some errors in HTML and JS. HTML和JS中有一些错误。
Try this 尝试这个
HTML: you have to put the correct 'id' of div in href attribute of anchor HTML:您必须在锚的href属性中输入div的正确“ id”
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabs</title>
<script src="js/jquery-ui-1.10.0.custom.min.js" script type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" script type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery-ui-1.10.0.custom.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="simpaleTabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" >
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active">
<a href="#production" class="ui-tabs-anchor">Production</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#invoices" class="ui-tabs-anchor">Invoices</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#warranty" class="ui-tabs-anchor">Warranty</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#services" class="ui-tabs-anchor">Services</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#parts" class="ui-tabs-anchor">Parts List</a>
</li>
<li class="ui-state-default ui-corner-top"><a href="#memorandums" class="ui-tabs-anchor">Memorandums</a>
</li>
</ul>
<div id="production"" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
content about Proudction here
</div>
<div id="invoices" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
content about Invoices here
</div>
<div id="warranty" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
content about Warranty here
</div>
<div id="services" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
content about Services here
</div>
<div id="parts" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
content about Parts List here
</div>
<div id="memorandums" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
content about Memorandums here
</div>
</div>
JS: have some syntax errors and you have to remove more classes and add more classes also. JS:有一些语法错误,您还必须删除更多的类并添加更多的类。
<script type="text/javascript">
$(document).ready(function(){
$('#simpaleTabs div').hide();
$('#simpaleTabs div:first').show();
$('#simpaleTabs ul li:first').addClass('active');
$('#simpaleTabs ul li a').click(function(){
$('#simpaleTabs ul li').removeClass('ui-state-active').removeClass('ui-tabs-active').removeClass('active');
$(this).parent("li").addClass('ui-state-active').addClass('ui-tabs-active').addClass('active');
var currentTab = $(this).attr('href');
$('#simpaleTabs div').hide();
$(currentTab).show();
return false;
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.