頁面修正

about/about.css

@@ -404,34 +404,20 @@ body .arrow:hover {
   }
 }
 
-#banner #banner-container ul .nav-item .nav-item2 {
+#banner #banner-container ul .nav-item .nav-item-achive {
   position: relative;
 }
 
-#banner #banner-container ul .nav-item .nav-item2:before {
+#banner #banner-container ul .nav-item .nav-item-achive:before {
   content: url(../img/about/sec01/item-arrow.png);
   display: block;
-  width: 80%;
+  width: 100%;
   height: 8px;
   position: absolute;
-  left: 12%;
+  left: 5%;
   bottom: 0;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
-  opacity: 0;
-}
-
-#banner #banner-container ul .nav-item .nav-item2 .after-nav {
-  opacity: 1;
-}
-
-#banner #banner-container ul .nav-item .nav-item2:focus:before {
-  width: 80%;
-  opacity: 1;
-}
-
-#banner #banner-container ul .nav-item .nav-item2 .btncss {
-  width: 80%;
   opacity: 1;
 }
 

about/about.scss

@@ -308,33 +308,18 @@ body {
                 @media screen and(max-width:$moblie) {
                     padding: 6px;
                 }
-                .nav-item2 {
+              
+                .nav-item-achive {
                     position: relative;
-                    &:before {
+                    &:before{
                         content: url(../img/about/sec01/item-arrow.png);
                         display: block;
-                        width: 80%;
+                        width: 100%;
                         height: 8px;
                         position: absolute;
-                        left: 12%;
+                        left: 5%;
                         bottom: 0;
                         transition: all 0.3s;
-                        opacity: 0;
-                    }
-
-                    // &:active:after,
-                    // &:focus:after{
-                    //     opacity: 1;
-                    // }
-                    .after-nav {
-                        opacity: 1;
-                    }
-                    &:focus:before {
-                        width: 80%;
-                        opacity: 1;
-                    }
-                    .btncss{
-                        width: 80%;
                         opacity: 1;
                     }
                 }

about/goto2.js

@@ -339,4 +339,32 @@ $("*").each(function (index, element) {
   // html 在滾動滾輪時 停止 html 所有效果
   $("html").on("mousewheel", function () {
     $("html").stop();
-  });
+  });
+
+  function showItem(){
+      $(".nav-item1").click(function(){
+        $(this).addClass('nav-item-achive');
+        $( ".nav-item2").removeClass('nav-item-achive');
+        $( ".nav-item3").removeClass('nav-item-achive');
+        $( ".nav-item4").removeClass('nav-item-achive');
+      });
+      $(".nav-item2").click(function(){
+        $( ".nav-item2").addClass('nav-item-achive');
+        $( ".nav-item1").removeClass('nav-item-achive');
+        $( ".nav-item3").removeClass('nav-item-achive');
+        $( ".nav-item4").removeClass('nav-item-achive');
+      });
+      $(".nav-item3").click(function(){
+        $( ".nav-item3").addClass('nav-item-achive');
+        $( ".nav-item1").removeClass('nav-item-achive');
+        $( ".nav-item2").removeClass('nav-item-achive');
+        $( ".nav-item4").removeClass('nav-item-achive');
+      });
+      $(".nav-item4").click(function(){
+        $( ".nav-item4").addClass('nav-item-achive');
+        $( ".nav-item1").removeClass('nav-item-achive');
+        $( ".nav-item2").removeClass('nav-item-achive');
+        $( ".nav-item3").removeClass('nav-item-achive');
+      });
+  }
+  showItem();

about/index.html

@@ -111,8 +111,8 @@
        
                 
                 <ul class="nav row nav-pills py-1 col-12 justify-content-md-center me-0" id="pills-tab" role="tablist">
-                    <li class="nav-item col-3 col-lg-1" role="presentation">
-                        <button class="nav-item2 border-0 bg-transparent text-white" id="pills-home-tab"
+                    <li class="nav-item  col-3 col-lg-1" role="presentation">
+                        <button class="nav-item1 nav-item-achive border-0 bg-transparent text-white" id="pills-home-tab"
                             data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab"
                             aria-controls="pills-home" aria-selected="true">公司簡介</button>
                     </li>
@@ -122,12 +122,12 @@
                             aria-controls="pills-profile" aria-selected="false">個案賞析</button>
                     </li>
                     <li class="nav-item col-3 col-lg-1" role="presentation">
-                        <button class="nav-item2 border-0 bg-transparent text-white" id="pills-contact-tab"
+                        <button class="nav-item3 border-0 bg-transparent text-white" id="pills-contact-tab"
                             data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab"
                             aria-controls="pills-contact" aria-selected="false">精彩影音</button>
                     </li>
                     <li class="nav-item col-3 col-lg-1" role="presentation">
-                        <button class="nav-item2 border-0 bg-transparent text-white" id="pills-contact2-tab"
+                        <button class="nav-item4 border-0 bg-transparent text-white" id="pills-contact2-tab"
                             data-bs-toggle="pill" data-bs-target="#pills-contact2" type="button" role="tab"
                             aria-controls="pills-contact" aria-selected="false">秘技分享</button>
                     </li>