Question

我正在尝试实施标签导航菜单。

我发现这个小提琴示例http://jsfiddle.net/S78Bt/3/正是我想做的事情。但是，我无法让tabify工作。

Programmatically change tab using tabify jquery plugin

在上面的问题中，我发现tabify功能没有被维护，所以我们必须输入它，我认为我把JS完全附加到我的网页时犯了一个错误，因为按钮（标签）没有＆＃39根本没有回应。

这是我的代码：

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文件就可以了。还有什么我需要做的吗？

基本上，在点击标签时，链接的课程应该更改为“有效”状态＆＃39;以及已经活跃的前一个＆＃39;应该删除（无类别）然后在水平标签下方，应显示与ID和href相对应的div。

这段代码有什么问题？

Answer 1

我将以下代码放在一个页面中并将其上传到我的网站，其工作方式与小提琴的工作方式完全相同。

如果您不在标题中包含jQuery，那么您将获得一个与您相似的页面。

CODE

<!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>

使用jQuery的tabify在网站中创建标签菜单（HTML + CSS）

1 个答案: