jquery写的tab 标签

最新推荐文章于 2024-09-16 14:31:24 发布

wpfonline

最新推荐文章于 2024-09-16 14:31:24 发布

阅读量305

点赞数

文章标签： jquery class border 阿里巴巴 div function

本文介绍了一个使用HTML和jQuery实现的简单Tab切换效果。通过CSS样式美化界面，并利用jQuery来控制不同内容面板的显示与隐藏，实现平滑的过渡效果。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<script src="jquery.js" type="text/javascript"></script>

    <style type="text/css">
        .tab
        {
            background-color: #FAFAFA;
            margin: 5px 8px;
            padding: 5px 10px;
        }
        .border span
        {
            background-color: #EFEFEF;
            border: 1px solid #CCCCCC;
            cursor: pointer;
            margin-right: 6px;
            padding: 2px 5px;
        }
        .border span.current
        {
            background-color: #FAFAFA;
            border-bottom-color: #fafafa;
        }
        .tab .border
        {
            border-bottom: 1px solid #CCCCCC;
            font-weight: bold;
            padding: 0 10px 2px;
        }
  .tab .border1
  {
   border: 1px solid #CCCCCC;
   border-top: 0px solid #CCCCCC;
   padding: 5px 10px 5px 10px;
  }
        .tab .mhot, .tab.allhot
        {
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".border span:first").addClass("current"); //为第一个SPAN添加当前效果样式
            $(".border1 div:not(:first)").hide(); //隐藏其它的UL
            $(".border span").click(function() {
                $(".border span").removeClass("current"); //去掉所有SPAN的样式
                $(this).addClass("current");
                $(".border1 div").hide();
                $("." + $(this).attr("id")).fadeIn('slow');
            });
        });
    </script>
</head>
<body>
    <div class="tab">
        <div class="border">
   <span id="tab1" class="current">tab1</span> <span id="tab2">tab2</span> <span id="tab3">tab3</span>
  </div>
  <div class="border1">
   <div class="tab1">
    我和我的祖国<p>最爱的地方<p>我和我</div>
   <div class="tab2">
    <p>一花一世办<p>一草一天堂<p></div>
   <div class="tab3">
    <li>阿里巴巴</li><li>阿里巴巴</li><li>一草一天堂</li><li>我和我的祖国</li><li>最爱的地方</li></div>
  </div>
    </div>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。