JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div id="top"></div>

<h1>Make Tabbed Interface with jQuery</h1>

<div class="box">
<ul id="tabMenu">
<li class="posts selected"></li>
<li class="comments"></li>
<li class="category"></li>
<li class="famous"></li>
<li class="random"></li>
</ul>
<div class="boxTop"></div>
<div class="boxBody">
<div id="posts" class="show">
<ul>
<li><a href="http://beben-koben.blogspot.com/search/label/Blogger">Blogger</a></li>
<li><a href="http://beben-koben.blogspot.com/search/label/Coded">Coded</a></li>
<li class="last"><a href="http://beben-koben.blogspot.com/search/label/CSS">CSS</a></li>
</ul>
</div>
<div id="comments">
<ul>
<li><a href="http://beben-koben.blogspot.com/search/label/Hack">Hack</a></li>
<li><a href="http://beben-koben.blogspot.com/search/label/HTML">HTML</a></li>
<li class="last"><a href="http://beben-koben.blogspot.com/search/label/Informasi">Info</a></li>
</ul>
</div>
<div id="category">
<ul><li><a href="http://beben-koben.blogspot.com/search/label/Javascript">Javascript</a></li>
<li><a href="http://beben-koben.blogspot.com/search/label/Ragam">Ragam</a></li>
<li class="last"><a href="http://beben-koben.blogspot.com/search/label/Tempalte">Tempalte</a></li>
</ul>
</div>
<div id="famous">
<ul>
<li><a href="http://beben-koben.blogspot.com/search/label/Trik%20dan%20Tips">Trik dan Tips</a></li>
<li><a href="http://beben-koben.blogspot.com/search/label/Widget">Widget</a></li>
<li class="last"><a href="http://beben-koben.blogspot.com/search/label/Tools">Tools</a></li>
</ul>
</div>
<div id="random">
<ul>
<li><a href="http://beben-koben.blogspot.com/search/label/SEO">SEO</a></li>
<li><a href="http://beben-koben.blogspot.com/search/label/jQuery">jQuery</a></li>
<li class="last"><a href="http://beben-koben.blogspot.com/search/label/Agama">Agama</a></li>
</ul>
</div>
</div>
<div class="boxBottom"></div>
</div>
<p>You can get this trick, do search with keywords "Make Tabbed Interface with jQuery" on my box search ☺</p>
<p class="credit">Creativity by: <a...

CSS

*{margin:0;padding:0}
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
body{background:#debe94;color:#555;display:block;font:13px/1.3 'Segoe...

JavaScript

$(document).ready(function() {
        $('#tabMenu > li').click(function() {
            if (!$(this).hasClass('selected')) {
                $('#tabMenu > li').removeClass('selected');
                $(this).addClass('selected');
                $('.boxBody div').slideUp('1500');
                $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
            }
        }).mouseover(function() {
            $(this).addClass('mouseover');
            $(this).removeClass('mouseout');
        }).mouseout(function() {
            $(this).addClass('mouseout');
            $(this).removeClass('mouseover');
        });
        $('.boxBody #category li').click(function() {
            window.location = $(this).children().attr('href');
        }).mouseover(function() {
            $(this).css('backgroundColor', '#555');
            $(this).children().animate({
                paddingLeft: "20px"
            }, {
                queue: false,
                duration: 300
            });
        }).mouseout(function() {
            $(this).css('backgroundColor', '');
            $(this).children().animate({
                paddingLeft: "0"
            }, {
                queue: false,
                duration: 300
            });
        });
        $('#.boxBody li').click(function() {
            window.location = $(this).children().attr('href');
        }).mouseover(function() {
            $(this).css('backgroundColor', '#555');
        }).mouseout(function() {
            $(this).css('backgroundColor', '');
        });
    });