在我的网站上完成标签后,我发现当我从第一个标签导航到下一个标签时,它运行良好,但如果我尝试从第一个标签导航到最后一个标签或第三个标签,它将崩溃而不能正常工作< / p>
这是完整的代码jquery,Css和html代码
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
&#13;
/*********************************************************************************/
/* Tabs */
/*********************************************************************************/
.tabs {
width:100%;
display:inline-block;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
}
.tab-links a {
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#65A69E;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-links a:hover {
background:#81B6AF;
text-decoration:none;
}
li.active a, li.active a:hover {
background:#56928B;
color:#4c4c4c;
}
/*----- Content of Tabs -----*/
.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
&#13;
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">DOMUS LIFT</a></li>
<li><a href="#tab2">MRL LIFT</a></li>
<li><a href="#tab3">OIL LIFT</a></li>
<li><a href="#tab4">ESCALATORS</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<h3>Efficiency and flexibility</h3>
<p> problems on private , public and commercial buildings .</p>
<p>onsumptions and low investment costs , all of which making DOMUS LIFT the best solution for any project.</p>
</div>
<div id="tab2" class="tab">
<h3>MRl LIFT</h3>
<p>MRl LIFT able both on new building and on the existing ones in need of recovery and increase of value</p>
<div id="tab3" class="tab">
<h3>OLEO-LIFT</h3>
<p>The OLEO-LIFT performance are suitable for </p>
</div>
<div id="tab4" class="tab">
<h3>ESCALATORS</h3>
<p>s production , both for the lift companies and for the robotized mobility .asiness on their after sale service
</p>
</div>
</div>
</div>
&#13;
请帮助
答案 0 :(得分:1)
您面临的问题是因为您尚未关闭包含
的div
正确的代码 -
<div id="tab2" class="tab">
<h3>MRl LIFT</h3>
<p>MRl LIFT able both on new building and on the existing ones in need of recovery and increase of value</p>
</div>
使用更正后的代码链接到jsfiddle -
答案 1 :(得分:0)
JQuery UI tabs是你的朋友。
在JQuery之后在html中包含JQuery UI脚本:
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
然后将您的JavaScript更改为以下内容:
jQuery(document).ready(function() {
$( "div.tabs" ).tabs();
});
您可以使用许多选项。有关详细信息,请参阅文档。有关样式建议,请查看examples。