我正在尝试实现选项卡导航菜单。
我发现这个小提琴演奏的例子http://jsfiddle.net/S78Bt/3/确实在做我想做的事。但是，我无法让Tabify工作。
Programmatically change tab using tabify jquery plugin
在上面的问题中，我发现tabify函数没有得到维护，因此我们不得不将其键入，我认为我完全错误地将JS附加到了网页上，因为按钮（选项卡）根本没有响应。
这是我的代码：
JS脚本：
<script>
(function(a){a.fn.extend({tabify:function(e){function c(b){hash=a(b).find("a").attr("href");return hash=hash.substring(0,hash.length-4)}function f(b){a(b).addClass("active");a(c(b)).show();a(b).siblings("li").each(function(){a(this).removeClass("active");a(c(this)).hide()})}return this.each(function(){function b(){location.hash&&a(d).find("a[href="+location.hash+"]").length>0&&f(a(d).find("a[href="+location.hash+"]").parent())}var d=this,g={ul:a(d)};a(this).find("li a").each(function(){a(this).attr("href", a(this).attr("href")+"-tab")});location.hash&&b();setInterval(b,100);a(this).find("li").each(function(){a(this).hasClass("active")?a(c(this)).show():a(c(this)).hide()});e&&e(g)})}})})(jQuery);
$(document).ready(function(){
function getHref(el){
hash = $(el).find('a').attr('href');
hash = hash.substring(0,hash.length-4);
return hash;
}
function setActive(el){
$(el).addClass('active');
$(getHref(el)).show();
$(el).siblings('li').each(function(){
$(this).removeClass('active');
$(getHref(this)).hide();
});
}
$('#ulaa').tabify();
setActive($('#target'));
});
</script>
这是我要放入标签中的UL：
<ul id="ulaa">
<li class="active"><a href="#a">abcd</a></li>
<li id="target" ><a href="#bb">asdbk</a></li>
<li><a href="#c">texte</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">inserttexthere</a></li>
</ul>
<div class="contenta" id="a">
jQuery is a cross-browser…
</div>
<div class="contenta" id="bb">
The Prototype JavaScript…
</div>
<div class="contenta" id="c">
Ext (X-t) is a JavaScript…
</div>
而已。我所有这些都在一个HTML文件中。还有什么我需要做的吗？
基本上，在单击选项卡时，链接的类别应更改为“活动”，而上一个已经具有“活动”的类别应被删除（使类别变为无类别）
然后在水平标签下应显示一个与ID和href相对应的div。
此代码有什么问题？
最佳答案
我将以下代码放在页面中，并将其上传到我的网站，并且完全按照小提琴的工作方式工作。
如果您的标题中没有包含jQuery，您将获得一个与您的页面相似的页面。
码
<!DOCTYPE html>
<head>
<title>Limerick OneLimerick TwoLimerick</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
body { font: 0.8em Arial, sans-serif; }
.menu { padding: 0; clear: both; }
.menu li { display: inline; }
.menu li a { background: #ccf; padding: 10px; float:left; border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}
.menu li.active a {
background: #eef;
}
.content { float: left; clear: both; border: 1px solid #ccf; border-top: none; border-left: none; background: #eef; padding: 10px 20px 20px; width: 400px; }
</style>
</head>
<body>
<div class='mytabs'>
<ul id="menu" class="menu">
<li><a href="#description">Limerick One</a></li>
<li><a href="#usage">Limerick Two</a></li>
<li><a href="#download">Limerick Three</a></li>
</ul>
<div id="description" class="content">
<h2>Limerick One</h2>
<p>
The limerick packs laughs anatomical
In space that is quite economical,
But the good ones I've seen
So seldom are clean,
And the clean ones so seldom are comical.
</p>
</div>
<div id="usage" class="content">
<h2>Limerick Two</h2>
<p>
Let my viciousness be emptied,
Desire and lust banished,
Charity and patience,
Humility and obedience,
And all the virtues increased.
</p>
</div>
<div id="download" class="content">
<h2>Limerick Three</h2>
Hickere, Dickere Dock,
A Mouse ran up the Clock,
The Clock Struck One,
The Mouse fell down,
And Hickere Dickere Dock.
</div>
</div>
<script>
$('.mytabs').tabs()
$( '.menu li a' ).on('click', function(){
$( '.menu li a' ).css('background-color', '#ccf');
$( this ).css('background-color', 'green');
});
</script>
</body>
</html>