我正在尝试实现标签导航菜单。
我找到了这个 fiddle 示例 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。
这段代码有什么问题？
最佳答案
我将以下代码放在一个页面中并将其上传到我的网站，它的工作方式与 fiddle 的工作方式完全相同。
如果您不在 header 中包含 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>
关于javascript - 使用 jQuery 的 tabify 在网站中创建标签菜单(HTML+CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22460401/