切换tab改变内容

最新推荐文章于 2024-09-26 14:24:29 发布

原创最新推荐文章于 2024-09-26 14:24:29 发布 · 537 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用背景图标作为Logo，并通过Tab元素改变页面内容的前端设计方法。通过HTML、CSS和JavaScript实现了动态内容切换，使网站更加互动和美观。

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

这周做了一个用背景图标做logo,以及点击tab改变内容的demo，效果如下：

代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           body{
               background: black;
           }
           *{
               margin: 0;
               padding: 0;
           }

           .head{
                   width: 100%;
                   height: 80px;
                   border-bottom: 1px solid #0f0f0f;

               }
           .head > div{
               display: inline-block;
           }

           .logo{
              height: 80px;
              line-height: 80px;
              font-size: 26px;
              font-weight: 700;
              color: #FFFFFF;
           }

           .logo:before{

               height: 80px;
               width: 48px;
               content: '';
               background:url(images/logo.png);
               background-repeat: no-repeat;
               background-position: center center;
               display: inline-block;
               vertical-align: middle;
               margin-left: 30px;
           }

           .tab{
               height: 80px;
              line-height: 80px;
              font-size: 16px;
              color: #858585;
              position:absolute;
              right: 10px;
           }

           .tab > span{
               display: inline-block;
               margin-left: 30px;
               width: 60px;
               height: 60px;
           line-height: 60px;
           text-align: center;

           }

           .tab .curselect{
               border-radius: 50%;
               border:2px solid #38A608;
               color:#FFFFFF;
           }

           .content{
               height: 100px;
               line-height: 100px;
               background: white;
           }

           .tab-content{
               width: 50px;
               margin: 0 auto;
           }
       </style>

   </head>
   <body>

       <div class="head">
           <div class="logo">银行</div>
           <div class="tab"><span class="curselect">贷款</span><span>存款</span><span>办卡</span></div>
       </div>
       <div class="content">
           <div id="tabcontent" class="tab-content"></div>
       </div>
   </body>
   <script src="js/jquery-1.8.0.min.js"></script>
   <script>

       $(".tab span").on('click',function(){
           $(".tab span").each(function(){
               $(this).removeClass("curselect");
           });
           var index = $(".tab span").index(this);

           $(this).toggleClass("curselect");
           switch(index){
               case 0:
                   $("#tabcontent").text('贷款');
               break;
               case 1:
                   $("#tabcontent").text('存款');
               break;
               case 2:
                   $("#tabcontent").text('办卡');
               break;
           }

       });

   </script>
</html>