Pure CSS completes tab to achieve 5 different switching corresponding content effects

 

 

A very commonly used special effect pure CSS completes the tab to achieve 5 different switching corresponding content effects

Instance preview

download link

example code

 

<div class="main">
                <ul class="tabs">
                    <li>
                        <input type="radio" checked name="tabs" id="tab1">
                        <label for="tab1">tab 1</label>
                        <div id="tab-content1" class="tab-content animated fadeIn">
                            <a href='#'>jQuery+jRange value range selection control_mouse drag value range</a>
                            <p>This article uses two examples to introduce a range selector plugin jRange. </p>
                        </div>
                    </li>
                    <li>
                        <input type="radio" checked name="tabs" id="tab2">
                        <label for="tab2">tab 2</label>
                        <div id="tab-content2" class="tab-content animated fadeIn">
                            <a href='#'>Using jsonp to implement cross-domain access under jquery</a>
                            <p>This article will show you how to use getJSON to submit forms asynchronously across domains. </p>
                        </div>
                    </li>
                    <li>
                        <input type="radio" checked name="tabs" id="tab3">
                        <label for="tab3">tab 3</label>
                        <div id="tab-content3" class="tab-content animated fadeIn">
                            <a href='#'>Flowplayer is a simple and cool video player</a>
                            <p>Flowplayer is a free web video player. It supports playing flv, swf and other streaming media and picture files, can play video files very smoothly, and supports custom configuration and expansion. </p>
                        </div>
                    </li>
                </ul>
            </div>