HTML

<div id="page-wrap">
		<div id="organic-tabs">
    		<ul id="explore-nav">
                <li id="ex-featured"><a class="current" href="#" rel="top">Top Snippets</a></li>
                <li id="ex-core"><a href="#" rel="handig">Handig</a></li>
                <li id="ex-jquery"><a href="#" rel="javascript">Javascript</a></li>
                <li class="last" id="ex-classics"><a href="#" rel="classics">Classics</a></li>
            </ul>
    		<div id="all-list-wrap">
    			<ul id="top">
    				<li><a href="http://www.csssnippets.be/2009/09/target_blank-op-de-xhtml-manier/">Target=_blank op de XHTML manier</a></li>
    				<li><a href="http://www.csssnippets.be/2009/06/1-kolom-header-sidebar-content/">1 kolom header sidebar content </a></li>
    				<li><a href="http://www.csssnippets.be/2009/10/tooltip-met-enkel-css/">Tooltip met enkel CSS</a></li>
    				<li><a href="http://www.csssnippets.be/2009/05/checkuncheck-alle-checkboxes/">Check/Uncheck alle checkboxes</a></li>
    				<li><a href="http://www.csssnippets.be/2009/09/veranderen-van-tekst-selectie-kleur/">Veranderen van tekst-selectie kleur</a></li>
    				<li><a href="http://www.csssnippets.be/2009/02/css-opacity/">CSS opacity</a></li>
    				<li><a href="http://www.csssnippets.be/2009/02/toon-applicatie-icon-naast-link/">Toon applicatie icon naast link</a></li>
    			</ul>
        	<ul id="handig">
            <li><a href="http://www.csssnippets.be/2009/10/css-horizontaal-drop-down-uitklap-navigatie/">CSS Horizontaal drop-down (uitklap) navigatie</a></li>
            <li><a href="http://www.csssnippets.be/2009/09/toon-scrollbar-in-firefox-altijd/">Toon scrollbar in Firefox altijd</a></li>
            <li><a href="http://www.csssnippets.be/2009/08/formulier-velden-en-line-height-in-firefox-probleem/">Formulier velden en line-height in FireFox probleem</a></li>
            <li><a href="http://www.csssnippets.be/2009/08/haslayout-oplossen-in-ie6-ie7/">Haslayout oplossen in IE6 & IE7</a></li>
            <li><a href="http://www.csssnippets.be/2009/06/eenvoudig-en-valid-css-hacken/">Eenvoudig en valid CSS hacken</a></li>
    				<li><a href="http://www.csssnippets.be/2009/05/css-hack-voor-chrome-en-safari/">CSS hack voor Chrome en Safari</a></li>
    				<li><a href="http://www.csssnippets.be/2009/04/position-fixed-in-msie6/">Position : fixed in MSIE6</a></li>
    				<li><a href="http://www.csssnippets.be/2009/04/volgorde-stylesheets/">Volgorde stylesheets</a></li>
    				<li><a href="http://www.csssnippets.be/2009/04/html-hr-stylen-via-css/">HTML hr stylen via CSS</a></li>
        		<li><a href="http://www.csssnippets.be/2009/04/conditional-comments-allemaal/">Conditional comments, allemaal</a></li>
    				<li><a href="http://www.csssnippets.be/2009/03/css-bar-graph-complex/">CSS Bar Graph complex</a></li>
        	</ul>
        	<ul id="javascript">
        		<li><a href="http://www.csssnippets.be/2009/09/jquery-even-hoge-kolommen/">Anything Slider jQuery Plugin</a></li>
        		<li><a href="http://www.csssnippets.be/2009/09/jquery-detecteer-links-naar-documenten/">Moving Boxes</a></li>
    				<li><a href="http://www.csssnippets.be/2009/09/jquery-browsers-detecteren/">Simple jQuery Dropdowns</a></li>
    				<li><a href="http://www.csssnippets.be/2009/10/tekst-zoom/">Tekst zoom</a></li>
    				<li><a href="http://www.csssnippets.be/2009/06/before-after-voor-blockquote/">:before & :after voor blockquote</a></li>
    				<li><a href="http://www.csssnippets.be/2009/06/eenvoudige-css-dropdown-navigatie/">Eenvoudige CSS dropdown navigatie</a></li>
    				<li><a href="http://www.csssnippets.be/2009/05/alleshover-active-focus-voor-ie6/">Alles:hover, :active, :focus voor IE6</a></li>
    				<li><a href="http://www.csssnippets.be/2009/05/styling-abbrevation-in-ie/">Styling abbrevation in IE</a></li>
        	</ul>
        	<ul id="classics">
            <li><a href="http://www.csssnippets.be/2009/05/media-type-print-bepalen/">Media type print bepalen</a></li>
            <li><a href="http://www.csssnippets.be/2009/05/basic-xhtml-10-strict-template/">Basic XHTML 1.0 Strict template</a></li>
            <li><a href="http://www.csssnippets.be/2009/04/valid-xhtml-met-flash/">Valid XHTML met flash</a></li>
            <li><a href="http://www.csssnippets.be/2009/04/printen-van-url-naast-link/">Printen van URL naast link</a></li>
            <li><a href="http://www.csssnippets.be/2009/04/formulier-zonder-tabellen/">Formulier zonder tabellen</a></li>
            <li><a href="http://www.csssnippets.be/2009/01/css-shorthand-voor-color/">CSS shorthand voor color</a></li>
        	</ul>
    		 </div>
		 </div>
		</div>

CSS

#page-wrap {
width: 440px;
margin: 20px auto;
}
ul {
list-style: none;
padding: 0;
font-size: 1.3em;
margin: 0;
}
ul li a {
display: block;
border-bottom: 1px solid #666;
padding: 4px;
color: #666;
text-decoration: none;
}
ul li a:hover {
background: #fe4902;
color: #fff;
}
ul li:last-child a {
border: none;
}
#organic-tabs {
background: #c9f2ba;
padding: 10px;
margin: 0 0 15px 0;
border: 1px solid #84c984;
}
#explore-nav {
overflow: hidden;
margin: 0 0 10px 0;
}
#explore-nav li {
width: 97px;
float: left;
margin: 0 10px 0 0;
}
#explore-nav li.last {
margin-right: 0;
}
#explore-nav li a {
display: block;
padding: 5px;
background: #959290;
color: #fff;
font-size: 10px;
text-align: center;
border: 0;
}
#explore-nav li a:hover {
background-color: #111;
}
#javascript, #handig, #classics {
display: none;
}
#explore-nav li#ex-featured a.current, ul#top li a:hover {
background-color: #0575f4;
color: #fff;
}
#explore-nav li#ex-core a.current, ul#handig li a:hover {
background-color: #d30000;
color: #fff;
}
#explore-nav li#ex-jquery a.current, ul#javascript li a:hover {
background-color: #8d01b0;
color: #fff;
}
#explore-nav li#ex-classics a.current, ul#classics li a:hover {
background-color: #FE4902;
color: #fff;
}

Jquery

Je hebt ook Jquery nodig:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

<![CDATA[
$(function() {
    $("#explore-nav li a").click(function() {
        // Figure out current list via CSS class
        var curList = $("#explore-nav li a.current").attr("rel");
        // List moving to
        var $newList = $(this);
        // Set outer wrapper height to height of current inner list
        var curListHeight = $("#all-list-wrap").height();
        $("#all-list-wrap").height(curListHeight);
        // Remove highlighting - Add to just-clicked tab
        $("#explore-nav li a").removeClass("current");
        $newList.addClass("current");
        // Figure out ID of new list
        var listID = $newList.attr("rel");
        if (listID != curList) {
            // Fade out current list
            $("#"+curList).fadeOut(300, function() {
                // Fade in new list on callback
                $("#"+listID).fadeIn();
                // Adjust outer wrapper to fit new list snuggly
                var newHeight = $("#"+listID).height();
                $("#all-list-wrap").animate({
                    height: newHeight
                });
            });
        }
        // Don't behave like a regular link
        return false;
    });
});
]]>

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/11/met-link-tabs-dynamisch-inhoud-veranderen/feed/ 0 http://www.csssnippets.be/2009/09/toon-scrollbar-in-firefox-altijd/ http://www.csssnippets.be/2009/09/toon-scrollbar-in-firefox-altijd/#comments Thu, 10 Sep 2009 09:05:18 +0000 Mark http://www.csssnippets.be/?p=330 In Firefox wordt de scrollbar niet getoond als de content niet lang genoeg is, dit kan tot een “jump” van je content zorgen moest de inhoud plots langer word door bijvoorbeeld een div die open klapt door javascript. Dit kan je vermijden door de scrollbar altijd te tonen:

CSS

html{
overflow:-moz-scrollbars-vertical;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/09/toon-scrollbar-in-firefox-altijd/feed/ 1