利用jQuery方法实现选项卡的功能

最新推荐文章于 2025-07-01 13:43:14 发布

执笔写流年殇

最新推荐文章于 2025-07-01 13:43:14 发布

阅读量8.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： jQuery 选项卡

本文链接：https://blog.youkuaiyun.com/fsfasgsfd/article/details/52588735

这个示例展示了如何利用jQuery来创建一个选项卡功能。通过点击不同的li元素，显示对应的div内容，其中包括了科比、库里、杜兰特和詹姆斯等篮球明星的介绍。点击选项卡时，对应的图片和介绍会展示出来。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        #box{
            width: 600px;
            height: 400px;
            margin: 50px auto;
        }
        #box ul{
            width: 600px;
            height: 40px;
            overflow: hidden;
        }
        #box ul li{
            float: left;
            width: 100px;
            height: 40px;
            border: 1px solid #ccc;
            margin-right: 10px;
            text-align: center;
            line-height: 40px;
            font-size: 30px;
            border-bottom:0;
            cursor: pointer;
        }
        #box div{
            width: 600px;
            height: 365px;
            background: #ccc;
            border: 1px solid #ccc;
            /*text-align: center;*/
            font-size: 20px;
            display: none;
            margin-top: -1px;
            text-indent: 2em;
        }
        #box div img{
            width: 200px;
            height: 250px;
            float: left;
        }
        #box .kebi{
            border: 1px solid #ccc;
            background: #ccc;
        }
        #box div.select{
            display: block;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li class="kebi">科比</li>
        <li>库里</li>
        <li>杜兰特</li>
        <li>詹姆斯</li>
        <li>邓肯</li>
    </ul>
    <div class="select">
        <img src="img/0.jpg" alt="" />
        科比·布莱恩特（Kobe Bryant），1978年8月23日出生，美国职业篮球运动员，
        自1996年起效力于NBA洛杉矶湖人队，直到NBA 2015-2016年赛季结束，科比正式退役。
        在科比长达20年的NBA生涯中，5次获得NBA总冠军，两次获得总决赛MVP（2009年&2010年）
        ，1次常规赛MVP（2008年），17次入选全明星阵容，其中4次获得全明星MVP。
        [1]到科比退役时，NBA总得分达到33643分，场均25分，4.7次助攻，5.2个篮板。
        [2]科比职业生涯也曾11次入选NBA最佳阵容一队，9次入选NBA最佳防守阵容一队。
        在2005-2006赛季对多伦多猛龙的比赛中，科比拿下单场职业生涯最高的81分，
        位列NBA历史单场得分第二位（仅次于张伯伦100分）。同时科比也曾代表美国国家队两次获得奥运会金牌（2008年和2012年）。
    </div>
    <div>
        <img src="img/2.jpg"/>
        斯蒂芬·库里（Stephen·Curry），1988年3月14日出生于美国俄亥俄州阿克伦，美国职业篮球运动员，
        司职控球后卫。2014年随美国队获西班牙篮球世界杯冠军
        5月4日，当选为本赛季常规赛的MVP；5月21日，入选NBA本赛季最佳第一阵容；
        6月，获2015年“黑人娱乐电视奖”-年度男运动员奖；7月22日，获球员工会奖关键先生和最难防守球员奖；10月28日，ESPN公布球员排名，斯蒂芬·库里排名第四；
        11月，NBA官方宣布斯蒂芬·库里当选西部周最佳球员；12月， 斯蒂芬·库里获得西部周最佳球员、
        2015年度最佳NBA球员奖、2015年美联社最佳男运动员奖。2016年1月19日，美媒体评选历史十大控卫，
        库里排名第四；3月，获2016年劳伦斯世界体育奖最佳男运动员提名。2016年5月11日，
        全票当选常规赛MVP的球员。2016年7月14日，ESPY颁奖盛典进行，
        库里荣获年度最佳破纪录表现奖。</div>
    <div>
        <img src="img/1.jpg"/>
        凯文·杜兰特，Kevin Durant ，1988年9月29日出生于华盛顿哥伦比亚特区（Washington，D.C.），
        篮球运动员，司职大前锋兼小前锋，效力于金州勇士队。在2007年选秀首轮第二顺位被西雅图超音速队选中 ，
        2008年随球队搬迁到俄克拉何马州。2010年，成为NBA史上最年轻的得分王 ，之后又连续2个赛季荣膺NBA常规赛得分王。
        2014年，同时获得得分王与NBA常规赛最有价值球员奖（MVP）。2013-2014赛季，
        以绝对优势荣膺2013至14赛季NBA常规赛最有价值球员奖（MVP）。2016年4月2日，
        在MVP排行榜中名列第二。</div>
    <div>
        <img src="img/11.jpg" alt="" />
        勒布朗·詹姆斯（1984年12月30日—），美国职业篮球运动员，司职小前锋，效力于克利夫兰骑士队。2003年的NBA选秀大会中，
        首轮第一顺位被克利夫兰骑士队选中；2003-2010年，在骑士队效力7年，期间获得两届NBA最有价值球员（MVP）。
        2012年，收获个人在NBA的第三座最有价值球员奖，同年获NBA生涯第一个总冠军并加冕总决赛MVP；2012年夏天，
        代表美国男篮获伦敦奥运会金牌，2013年，再度获NBA总冠军、完成两连冠，并连续两年包揽常规赛和总决赛MVP;
        2014-2015赛季，回归克利夫兰骑士。2015年5月21日，入选NBA本赛季最佳第一阵容；

        2015年12月8日，与耐克公司签订终身合同.2016年1月19日，2015-2016赛季，詹姆斯带领骑士队以4:3战胜勇士队获得队史首个冠军。
        2016年7月14日，在ESPY颁奖礼上，勒布朗-詹姆斯被评为年度最佳NBA球员。
    </div>
    <div>
        <img src="img/300.jpg" alt="" />
        蒂姆·邓肯出生于美属维尔京群岛圣克罗伊岛（St. Croix, U.S. Virgin Islands），美国职业篮球运动员，
        司职大前锋与中锋，效力于NBA圣安东尼奥马刺队。蒂姆·邓肯是1997年NBA选秀状元，并先后五次获得NBA总冠军，
        三次获得NBA总决赛MVP。他还是1998年NBA年度最佳新秀，先后获得过两次NBA常规赛MVP。在邓肯为马刺效力的18年里，
        马刺一共夺得了5次总冠军。在为马刺征战的1053场比赛里，邓肯一共拿到了21663分、12013个篮板、3296次助攻和2381次盖帽。2014年6月16日，
        马刺和热火展开总决赛第五场对决，最终以104-87大胜对手，总比分4-1淘汰热火夺取2013-14赛季总冠军，
        这是邓肯第五座总冠军奖杯，2015年4月27日，邓肯第238场季后赛后获得历史第三位。2015年5月21日，
        入选NBA本赛季最佳第三阵容。2016年7月，邓肯正式宣布退役。
    </div>

</div>

</body>

<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $("ul li").click(function(){
        var index=$("ul li").index(this)
        $(this).addClass("kebi").siblings().removeClass("kebi")
        $("#box div").eq(index).addClass("select").siblings().removeClass("select")
    })

</script>
</html>