Welcome, Old Sport!

一个简单的选项切换功能 CSS & jQuery

by ilikecss ON 2011/01/28 6820

看到许多朋友想要选项卡切换的效果,我在网上找了几个,把框架和CSS都整合起来制作了一款切换效果,简单、实用。点击选项框架会自适应高度,最后我附加了源文件下载。
※教程使用了CSS边框阴影效果,如需最佳请使用相应浏览器。

Step1. 创建HTML

<div id="example">

    <ul class="nav">
        <li class="nav-one"><a href="#featured" class="current">Featured</a></li>
        <li class="nav-two"><a href="#core">Core</a></li>
        <li class="nav-three"><a href="#jquerytuts">jQuery</a></li>
        <li class="nav-four last"><a href="#classics">Classics</a></li>
    </ul>

    <div class="list-wrap">

        <ul id="featured">
            <li><a href="http://ilikecss.com/web-design/examples/jquery/20101229/" target="_blank">Portfolio Slider Gally with CSS & jQuery</a></li>
            <li><a href="http://ilikecss.com/web-design/examples/jquery/20101209/" target="_blank">Mirror Image Slideshow with CSS & jQuery</a></li>
            <li><a target="_blank" href="http://ilikecss.com/web-design/examples/framework/20101207/">Fixed SideNav Layout with CSS & jQuery</a></li>
        </ul>

         <ul id="core" class="hide">
            <li><a href="http://ilikecss.com/web-design/examples/jquery/20100928/" target="_blank">News Auto Scrolling with CSS & jQuery</a></li>
            <li><a href="http://ilikecss.com/web-design/examples/jquery/20100929/" target="_blank">Create Simple Tooltips with CSS & jQuery</a></li>
            <li><a href="http://ilikecss.com/web-design/examples/jquery/20101008/" target="_blank">Easy Accordion Plugin with CSS & jQuery</a></li>
            <li><a href="http://ilikecss.com/web-design/examples/jquery/20101201/" target="_blank">Zoomable Image Gallery with CSS & jQuery</a></li>
            <li><a href="http://ilikecss.com/web-design/examples/framework/20101207/" target="_blank">Fixed SideNav Layout with CSS & jQuery</a></li>
            <li><a href="http://ilikecss.com/web-design/examples/jquery/20101210/" target="_blank">Blizzard Accordion with CSS & jQuery</a></li>
            <li><a href="http://ilikecss.com/web-design/examples/framework/20101009/" target="_blank">Beautiful Framework with CSS & jQuery</a></li>
         </ul>

         <ul id="jquerytuts" class="hide">
            <li><a href="http://ilikecss.com/web-design/examples/jquery/20110106/" target="_blank">Images Rotate Scroll with CSS & jQuery</a></li>
            <li><a href="http://ilikecss.com/web-design/examples/jquery/20101109/" target="_blank">Photo Zoom Effect with CSS & jQuery</a></li>
            <li><a href="http://ilikecss.com/web-design/examples/navigation/20101105/" target="_blank">Background Image-navigation with CSS & jQuery</a></li>
            <li><a href="http://ilikecss.com/web-design/examples/navigation/20101104/" target="_blank">Changeable Boxes Menu with CSS & jQuery</a></li>
            <li><a href="http://ilikecss.com/web-design/examples/framework/20101103/" target="_blank">Website Scrolling with CSS & jQuery</a></li>
            <li><a href="http://ilikecss.com/web-design/examples/jquery/20101028/" target="_blank">Animation Image-gallery with CSS & jQuery</a></li>
         </ul>

         <ul id="classics" class="hide">
            <li><a href="http://blog.ilikecss.com/index.php/web-design-blog/iinnovative-gadgets-and-accessories/" target="_blank">Iinnovative Gadgets And Accessories</a></li>
            <li><a href="http://blog.ilikecss.com/index.php/web-design-blog/weekly-design-news-resources-tutorials/" target="_blank">Weekly Design News Resources Tutorials</a></li>
            <li><a href="http://blog.ilikecss.com/index.php/web-design-blog/wonderful-world-of-illustration/" target="_blank">Wonderful World Of Illustration</a></li>
            <li><a href="http://blog.ilikecss.com/index.php/web-design-blog/brush-lovers/" target="_blank">Brush Lovers</a></li>
            <li><a target="_blank" href="http://ilikecss.com/web-design/examples/jquery/20101026/">Animation Banner with CSS & jQuery</a></li>
         </ul>

     </div> <!-- END List Wrap -->

 </div> <!-- END Tabs (Example) -->

Step2. 创建CSS

/* Content Begin */
#content_wrapper {
width: 750px;
margin: 50px auto 0 auto;
clear: both;
padding-bottom: 50px;
}
/* Creating the Switch */
p.switch {
width: 122px;
height: 26px;
margin-bottom: 15px;
background: url(../images/switch_bg.gif) no-repeat;
}
a.switch_thumb {
width: 34px;
height: 26px;
line-height: 26px;
padding: 0;
margin: 0 0 0 80px;
display: block;
background: url(../images/switch_btn.gif) no-repeat;
outline: none;
text-indent: -9999px;
}
a.swap { background-position: left bottom; }
a:hover.switch_thumb {
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
/* Generic Utility */
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
/* Specific to example one */
#example {
width: 420px;
background: #eee;
padding: 10px;
margin: 0 auto;
border: 1px solid #AAA;
-moz-box-shadow: 0 0 5px #666;
-webkit-box-shadow: 0 0 5px #666;
}
#example .nav {
overflow: hidden;
margin: 0 0 10px 0;
}
#example .nav li {
width: 97px;
float: left;
margin: 0 10px 0 0;
}
#example .nav li.last { margin-right: 0; }
#example .nav li a {
display: block;
padding: 5px;
background: #959290;
color: #FFF;
font-size: 11px;
text-align: center;
border: 0;
}
#example .nav li a:hover { background-color: #111; }
#example ul { list-style: none; }
#example ul li a {
display: block;
border-bottom: 1px solid #BBB;
padding: 4px;
color: #666;
text-decoration: none;
}
#example ul li a:hover {
background: #fe4902;
color: #FFF;
}
#example ul li:last-child a { border: none; }
#example ul li.nav-one a.current, #example ul.featured li a:hover {
background-color: #0575f4;
color: #FFF;
}
#example ul li.nav-two a.current, #example ul.core li a:hover {
background-color: #d30000;
color: #FFF;
}
#example ul li.nav-three a.current, #example ul.jquerytuts li a:hover {
background-color: #8d01b0;
color: #FFF;
}
#example ul li.nav-four a.current, #example ul.classics li a:hover {
background-color: #FE4902;
color: #FFF;
}

Step3. 插入jQuery和脚本包

脚本:

$(function() {

            $("#example").organicTabs();

 });

脚本包:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="js/organictabs.jquery.js"></script>
2条评论
  1. #1

    kelln说道:

    thank you!




TOP