[javascript]ボーダー効果で現在のページを維持するアクティブなクラスを作成するにはどうすればよいですか?

受付中 プログラミング
2024-12-24
小次郎又三郎
私は、ユーザーがアニメーションを作成したいすべてのタグにアニメーション効果を適用し、その後そのページがリダイレクトされるプロジェクトで作業しています。しかし、問題は、現在のナビゲーションバーの下に境界線の下部が必要なことです。
        <!DOCTYPE html>
        <html>
          <head>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <link rel="stylesheet" href="style.css" />
          </head>
          <body>
            <nav class="new__parent-navbar">
              <div class="new__logo">
                <a href="/getdata/startups" class="logo-link"
                  ><h1 class=""><b>Header-issue</b></h1></a
                >
              </div>
        
              <div class="new__navbar h-nav">
                <ul class="new__nav-list v-class">
                  <h4 class="">
                    <li class=""><a href="/home.html">HOME</a></li>
                  </h4>
                  <h4 class="">
                    <li class=""><a href="/about.html">ABOUT</a></li>
                  </h4>
                  <h4 class="">
                    <li class=""><a href="/contact.html">CONTACT US</a></li>
                  </h4>
        
                  <h4 class="">
                    <li class=""><a href="/job.html">JOBS</a></li>
                  </h4>
                  <!-- <h4 class="">
                <li class=""><a href="/login/startup" class="login-nav"> LOGIN</a></li>
              </h4> -->
                </ul>
                <h4 class="">
                  <a class="login-nav" href="/login/startup">LOGIN</a>
                </h4>
              </div>
              <br />
              <br />
              <!-- <div class="rightNav v-class">
                    <input type="text" name="search" id="search">
                    <button class="btn btn-sm">SEARCH</button>
                    <h1>rightnav</h1>
                </div> -->
        
              <div class="new__burger">
                <div class="new__line"></div>
                <div class="new__line"></div>
                <div class="new__line"></div>
              </div>
            </nav>
        
            <script>
              burger = document.querySelector(".new__burger");
              navbar = document.querySelector(".new__navbar");
              // rightNav = document.querySelector('.rightNav')
              navlist = document.querySelector(".new__nav-list");
              black = document.querySelector(".b-black");
        
              burger.addEventListener("click", () => {
                navbar.classList.toggle("h-nav");
                //  rightNav.classList.toggle('v-class');
                navlist.classList.toggle("v-class");
                navbar.classList.toggle("b-black");
              });
              /* --------------------------------   Rachit Gupta */
        
              window.addEventListener("scroll", function () {
                let header = document.querySelector("nav");
                header.classList.toggle("sticky", window.scrollY > 0);
              });
        
              /* -------------------------------  End  */
            </script>
          </body>
        </html>
        
        
        /* @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,100&family=Open+Sans&family=Raleway:wght@200;400&display=swap"); */
        
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
            font-family: "Raleway", serif;
          }
          
          body {
            font-family: "Raleway", serif;
            /* font-family:'Roboto Slab', serif; */
          }
          /* --------------------------------   Rachit Gupta */
           /* .new__parent-navbar {
            display: flex;
            position: fixed;
            width: 100%;
            justify-content: space-between;
            transition: 0.6s;
            z-index: 5;
          } */
          
          nav.sticky {
            top: 0%;
            background: #FBFBFB;
            
            /* color:; */
            /* text-decoration: ; */
          }
          nav .sticky li a{
            text-decoration: none;
            color: white;
            /* background: rgb(27, 26, 90); */
            position: relative;
            font-size: 1.1rem; 
          } 
          
          /* -------------------------------  End  */
          .new__parent-navbar {
            display: flex;
            /*START of added code*/
            position: fixed; 
            top: 0; 
            left: 0;
            right:0;
            z-index: 999;
            /*DONE*/
            /* background: white; */
            box-shadow: 1px 1px 4px 1px rgb(152, 152, 152);
            /* border-radius: 0px 0px 5px 5px; */
            margin-bottom: 40px;
            padding: 7px 0px;
            /* width: 80%; */
          }
          /*Added*/
          a.active{
            text-decoration: 1px solid goldenrod;
            color: aquamarine;
          }
          .new__logo {
            width: 30%;/*changes*/
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            font-weight: 300;
            position: relative;
            left: 10px;
            /* background: white; */
            color: rgb(78, 78, 167);
            /* font-size: 60px; */
          
            /* background-color: blue; */
          }
          .new__navbar {
            display: flex;
            /* background: white; */
            /* /* display: fixed;
            top: 0px;
            left:0px; */
            /* z-index: 3;  */
          }
          .new__nav-list {
            width: 100%;
            /* background: #15114b; */
            display: flex;
            justify-content: flex-end;
            align-items: center;
          }
        
        
        
          .new__nav-list li {
            list-style: none;
            color: black;
            padding: 10px 10px;
          }
          .new__nav-list li a {
            text-decoration: none;
            color: rgb(21, 41, 123);
            position: relative;
            font-size: 1rem; /**/
          }
          .new__nav-list li a:hover {
            color: #2A528A;
          }
          
          .new__nav-list li a::after {
            position: absolute;
            content: "";
            display: block;
            margin-top: 5px;
            width: 0;
            height: 2px;
            background: #fcd600;
            transition: width 0.3s;
            left: 50%;
            transform: translate(-50%, 0);
          }
          
          .new__nav-list li a:hover::after {
            width: 100%;
          }
          #search {
            padding: 5px;
            font-size: 17px;
            border: 2px solid grey;
            border-radius: 9px;
            margin-top: 15px;
          }
          .new__burger {
            position: absolute;
            cursor: pointer;
            right: 4%;
            top: 15px;
            display: none;
          }
          .new__line {
            width: 33px;
            /* background: #fff; */
            height: 4px;
            margin: 4px 3px;
            border-radius: 43px;
          }
          
          .logo-link {
            margin-left: 6%;
            color: rgb(23, 27, 135);
            text-decoration: none;
            position: absolute;
            left: 80px; /*made a change : 80px, No change*/ 
            text-shadow: 1px 1px 1px grey; /* added */
          }
          .logo-link:hover {
            color: navy; /*midnightblue;*/
            text-decoration: none;
            transform: scale(1.05);
            text-shadow: 2px 2px 2px grey;
          }
          /* .logo-link:focus {
            color: white;
            text-decoration: none;
          } */
          
        
        
          @media (max-width: 992px) {
            .new__parent-navbar {
              flex-direction: column;
            }
            .new__logo {
              padding-top: 10px;
              width: 100%;
            }
            .new__nav-list {
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }
            .new__navbar {
              flex-direction: column;
              justify-content: center;
              align-items: center;
              transition: all 0.5s ease-out;
              height: 100vh;
            }
            .rightNav {
              text-align: center;
            }
            #search {
              width: 100%;
            }
            .new__burger {
              display: block;
            }
            .h-nav {
              height: 11px;
              /* height: 372px; */
            }
            .v-class {
              opacity: 0;
              display: none;
            }
          }
          /*My code  yogita*/
          .login-nav{
            height: auto;
            width: 100px;
            position: relative;
            top: 10px;
            bottom: 20px;
            left: 280px;
            margin: 20px;
            padding: 2px 10px;
            background-color: navy;
            color: white;
            text-shadow: 1px 1px 1px #eee;
            border-radius: 20px;
            border: 2px solid navy;
            box-shadow: 1px 1px 5px 1px grey;
          }
          .login-nav:hover{
            box-shadow: 1px 2px 3px 1px grey;
            text-decoration: none;
            color: white;
            text-shadow: 1px 2px 3px grey;
            /* transform: scale(1.05); */
          }
          /* ---------------------end --------- */
        
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
            <link rel="stylesheet" href="style.css" />
          </head>
          <body>
            <nav class="new__parent-navbar">
              <div class="new__logo">
                <a href="""" class="logo-link"
                  ><h1 class=""><b>Header-issue</b></h1></a
                >
              </div>
        
              <div class="new__navbar h-nav">
                <ul class="new__nav-list v-class">
                  <h4 class="">
                    <li class=""><a href="/home.html">HOME</a></li>
                  </h4>
                  <h4 class="">
                    <li class=""><a href="/about.html">ABOUT</a></li>
                  </h4>
                  <h4 class="">
                    <li class=""><a href="/contact.html">CONTACT US</a></li>
                  </h4>
        
                  <h4 class="">
                    <li class=""><a href="/job.html">JOBS</a></li>
                  </h4>
                </ul>
                <h4 class="">
                  <a class="login-nav" href="/login/startup">LOGIN</a>
                </h4>
              </div>
              <br />
              <br />
        
              <div class="new__burger">
                <div class="new__line"></div>
                <div class="new__line"></div>
                <div class="new__line"></div>
              </div>
            </nav>
        
            <script>
              burger = document.querySelector(".new__burger");
              navbar = document.querySelector(".new__navbar");
              // rightNav = document.querySelector('.rightNav')
              navlist = document.querySelector(".new__nav-list");
              black = document.querySelector(".b-black");
        
              burger.addEventListener("click", () => {
                navbar.classList.toggle("h-nav");
                //  rightNav.classList.toggle('v-class');
                navlist.classList.toggle("v-class");
                navbar.classList.toggle("b-black");
              });
        
              window.addEventListener("scroll", function () {
                let header = document.querySelector("nav");
                header.classList.toggle("sticky", window.scrollY > 0);
              });
        
              /* -------------------------------  End  */
            </script>
            contact
          </body>
        </html>
        
残りのすべてについて、連絡先と仕事は同じです
回答一覧
あなたはcssソリューションが欲しいですか、それともjsが現在のnavアイテムにアクティブなクラスを動的に追加したいですか?
小次郎又三郎
このロジックを作成するものはすべて、アクティブなクラスを1つに入れてから、.activeでアクティブではなく、無駄にすることで試しました。
小次郎又三郎
/ページ名の前を削除しようとしましたか? 変化する<li class=""><a href="/contact.html">CONTACT US</a></li> に<li class=""><a href="contact.html">CONTACT US</a></li>
小次郎又三郎
問題は、HTMLコードがセマンティックではないことです。対応する、または完全に機能activeする現在のページのクラス。<li><a> <li>sからsをアンラップする必要があり<h4>ます。 言い換えれば、
        <ul>
            <li></li>
        </ul>
        
この構造で、cssを介して太字/サイズのスタイリングを提供します。
小次郎又三郎