jquery 一个简单的tab（选项卡）实现

最新推荐文章于 2021-06-05 18:31:04 发布

xiaojay2008

最新推荐文章于 2021-06-05 18:31:04 发布

阅读量222

点赞数

分类专栏： jquery 文章标签： jQuery HTML ViewUI

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏


<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.5.1.min.js">
</script>
<script type="text/javascript" >
$(function(){
    alert('hello world');
    $('#tab-title a').click(function(){
        $(this).addClass("selected");
        $(this).siblings().removeClass();
        var u = this.href.split('#')[1];
        $('#'+u).removeClass();
        $('#'+u).siblings().addClass('hide');
        })})
</script>
<style type="text/css">
#tab{width:250px;
    margin:10px auto;
    border:1px solid #ccf;
    overflow:hidden;}
#tab-title h3{color:#666;font-size:15px;font-weight:400;}
#tab-title .selected {color:#356aa0;border-bottom:0px;}
#tab-title a{
        padding:5px 9px 5px 10px;
        border:1px solid #ccf;
        margin-left:-5px;
        text-decoration:none;
}
#tab-content .hide{display:none;}
#tab-content ul{padding:5px 10px;overflow:hidden;}
#tab-content ul li{padding-top:5px;height:20px;}
</style>

</head>

<div id="tab">
<div id="tab-title">
    <h3><a class="selected" href="#tab1">最新评论</a>
    <a href="#tab2">近期热评</a>
    <a href="#tab2">随机文章</a></h3>
</div>
<div id="tab-content">
<ul id="tab1"><li>test1</li><li>test1</li><li>test1</li></ul>
<ul id="tab2" class="hide"><li>test2</li><li>test2</li><li>test2</li></ul>
<ul id="tab3" class="hide"><li>test3</li><li>test3</li><li>test3</li></ul>
</div>
</div>

xiaojay2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 一个简单的tab（选项卡）实现

[code="html"]$(function(){ alert('hello world'); $('#tab-title a').click(function(){ $(this).addClass("selected"); $(this).siblings().removeClass(); va...
复制链接

扫一扫