Using jQuery's tabify to create tab menu in website (HTML+CSS)

Question

Using jQuery's tabify to create tab menu in website (HTML+CSS)

2.6k views Asked by user3429797 At 20 November 2024 at 02:53

I'm trying to implement a tab navigation menu.

I found this fiddle example http://jsfiddle.net/S78Bt/3/ doing exactly what I want to do. However, I can't get the tabify to work.

Programmatically change tab using tabify jquery plugin

In the above question, I found the tabify function is not being maintained, so instead we have to type it out, I reckon I made a mistake in completely attaching the JS with my webpage since the buttons (tabs) don't respond at all.

Here's my code:

JS script:

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

And here's the UL that I'm trying to put in tabs:

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

That's it. I have all this in just the one HTML file. Is there something more I need to do?

Basically, on clicking a tab the link's class should change to 'active' and the previous one that already has 'active' should be removed (made class-less) and then underneath the horizontal tabs a div should be shown corresponding to the ID and the href.

What's wrong with this code?

Original Q&A

There are 1 answers

**TimSPQR** · Answer 1 · 2014-03-18T02:01:19+00:00

I put the following code in a page and uploaded it to my website and works exactly the way the fiddle works.

If you don't include jQuery in your header, you'll get a page that looks like yours.

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>

TechQA.

Using jQuery's tabify to create tab menu in website (HTML+CSS)

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Popular Questions

Popular Tags

Trending Questions