Css Snippets » switch http://www.csssnippets.be Snippets for you, snippets for me Mon, 17 Oct 2011 08:42:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Met link-tabs dynamisch inhoud veranderen http://www.csssnippets.be/2009/11/met-link-tabs-dynamisch-inhoud-veranderen/ http://www.csssnippets.be/2009/11/met-link-tabs-dynamisch-inhoud-veranderen/#comments Tue, 17 Nov 2009 06:45:06 +0000 Mark http://www.csssnippets.be/?p=565 Een tabbed navigatie die zonder page-refresh inhoud verandert door middel van Jquery:

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 del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/11/met-link-tabs-dynamisch-inhoud-veranderen/feed/ 0