[英]Stuck on creating a simple jQuery tab
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. .</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis..</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, .</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo</p>
</div>
</div>
</body>
</html>
我已经逐行检查了上面的代码,找不到它不起作用的原因。 我已经看到许多类似的示例,它们的代码看起来相同,但是我的代码不起作用。 有人可以帮帮我吗。
您不需要为简单标签添加jquery UI,而是使用以下代码
加载jQuery UI样式或执行以下替代解决方案
脚本.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('ul.header li').on("click",function(){
$('.tab_content > div').hide();
$('#tab-'+($(this).index()+1)).fadeIn();
/* for adding slected class */
$('.selected_li').removeClass('selected_li');
$(this).addClass('selected_li');
});
});
</script>
Style.css
<style>
.tab_content > div {
display: none;
}
.tab_content > #tab-1 {
display: block;
}
</style>
的HTML
<ul class="header">
<li class="selected_li">Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Proin dolor</li>
</ul>
<div class="tab_content">
<div id="tab-1" >test content 1</div>
<div id="tab-2">test content 2</div>
<div id="tab-3">test content 3</div>
</div> <!-- tab_content -->
谢谢,让我知道是否有帮助
更新:-请执行以下样式以获得更好的外观
<style>
.tab_content > div {
display: none;
}
.tab_content > #tab-1 {
display: block;
}
.header {
padding: 0; margin: 0;
}
.header li {
float: left;
background: #FFF;
color: #036; cursor: pointer;
padding: 8px; border: 1px solid #036;
}
.header .selected_li {
background: #036;
color: #FFF;
}
.clear {
clear:both;
}
.tab_content {
padding: 8px;
border: 1px solid #036;
}
</style>
谢谢
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"/></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"/></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. .</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis..</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, .</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo</p>
</div>
</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.