其实我制作html静态页面的时候很少做这个功能，主要是懒得去写而且觉得有时候影响美观，重点是一年前jquery课程的时候也没有怎么认真听讲，所以许多jquery效果都是很早之前存的素材，制作网页的时候直接用上。但是我觉得，很多时候这种选项卡效果是一个网站的基本要素，所以认为有必要整理写下来，以后自己可以用，而别人同样可以复制粘贴去用，当我在文章凑数吧（滑稽）

首先是body区域内代码：

<div class="tabs">
    <h2 class="tabs_menu clearfix">
        <a href="javascript:;" class="selected">日</a>
        <a href="javascript:;">周</a>
        <a href="javascript:;">月</a>
    </h2>
    <div class="tabs_content_wrap">
        <div class="tabs_content">每日点击榜</div>
        <div class="tabs_content hide">每周点击榜</div>
        <div class="tabs_content hide">每月点击榜</div>
    </div>
</div>

然后是css样式代码：

.tabs{width:500px;margin:100px auto;}
.tabs_menu{font-size:0;}
.tabs_menu a{padding:5px;border:1px solid blue;font-size:12px;margin-left:10px;background:#ECECEC;float:left;}
.tabs_menu .selected{background:white;border-bottom:1px solid white;position:relative;}
.tabs_content{border:1px solid blue;padding:10px;margin-top:-1px;}

最后是jquery代码，首先引入jquery文件：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var $menu = $('.tabs > .tabs_menu a');
$menu.click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
    var index = $menu.index(this);
    $('.tabs_content_wrap > .tabs_content').eq(index).show().siblings().hide();
});
</script>

以上就是简单实现效果，以后实际开发可以参考。