Search code examples
htmlsassanchor

Anchor tag inside list element not working

I have a couple anchor tags inside an unordered list element like so:

        <ul class="d-flex justify-content-center flex-row unordered">
          <li class="li-0" id="li-0"><a href="/NavigationSection/features.html">Features</a></li>
          <li class="li-1" id="li-1"><a href="/NavigationSection/pricing.html">Pricing</a></li>
          <li class="li-2" id="li-2"><a href="/NavigationSection/help.html">Help</a></li>
          <li class="li-3" id="li-3"><a href="/NavigationSection/blog.html">Blog</a></li>
          <li class="li-4" id="li-4"><a href="/NavigationSection/about.html">About Us</a></li>
        </ul>

However upon testing, the anchor tags seem to not work.

I have checked console within the dev tools on google, and the anchor tags do not appear in the list element either within the source.

Some pre-answers: Yes i have a folder named NavigationSection and those requested html files are named correctly and do exist. I have tried adding a z-index however that does not seem to work.

Solution

  • The unexpected behavior is due to the following line in your JavaScript code:

    $('.unordered').append($(`.li-${x}`)).text(listData[x])

    The .text() call completely replaces the content inside the <li> elements with the text. This also includes any HTML within the <li> elements, thus removing the <a> elements.

    You could consider removing the .text() call entirely:

    // Create hamburger menu when screen is less than 776px or else return to original values
const listData = []
for (var i=0; i<=4; i++){
  listData.push($(`.li-${i}`).text())
}

if ($(window).width() < 776){
  $('.unordered').html('<i class="fa-solid fa-bars mt-2 dropdown"></i>').css("paddingLeft", "0px")
} else {
  for (var x=0; x<=4; x++){
    $('.unordered').append($(`.li-${x}`))
  }
}
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
* {
  margin: 0px;
  padding: 0px;
  font-family: "Poppins", monospace, sans-serif;
}

@keyframes phone-load {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes title-load {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes text-load {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes bg-load {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100;
  }
}
body {
  height: 100svh;
  width: 100vw;
  background: url("./Secondary Files/bg-image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
}
@media (max-width: 915px) {
  body {
    height: 120svh;
  }
}
body main {
  background-color: rgb(14, 13, 13);
  width: 80%;
  margin: 75px 0px;
  border-radius: 25px;
  animation: 1s ease-in-out 0s 1 bg-load;
}
body main nav {
  margin-top: 25px;
  column-gap: 30px;
  animation: 1s ease-out 0s 1 text-load;
}
@media (max-width: 882px) {
  body main nav {
    column-gap: 10px;
  }
}
body main nav .sections-container {
  color: rgb(154, 189, 169);
}
body main nav .sections-container ul {
  list-style: none;
  margin: 0px;
  column-gap: 30px;
}
@media (max-width: 1030px) {
  body main nav .sections-container ul {
    column-gap: 10px;
  }
}
body main nav .sections-container ul li {
  float: left;
  font-weight: 300;
  cursor: pointer;
}
body main nav .account-buttons .login-btn, body main nav .account-buttons .sign-up-btn {
  background-color: rgb(29, 120, 139);
  font-weight: 700;
  color: black;
}
body main nav .account-buttons .login-btn:hover, body main nav .account-buttons .sign-up-btn:hover {
  color: black;
}
body main .info-display {
  flex-direction: row;
  transform: translateY(30%);
}
@media (max-width: 915px) {
  body main .info-display {
    flex-direction: column;
    row-gap: 50px;
    margin-top: 25px;
    transform: translateY(0%);
  }
}
@media (max-height: 960px) {
  body main .info-display {
    transform: translateY(15%);
  }
}
@media (max-height: 854px) {
  body main .info-display {
    transform: translateY(5%);
  }
}
body main .info-display .info .information-details {
  animation: 1s ease-out 0s 1 title-load;
}
body main .info-display .info .information-details h1, body main .info-display .info .information-details h6 {
  color: rgb(154, 189, 169);
}
body main .info-display .info .information-details h1 {
  max-width: 15ch;
}
body main .info-display .info .information-details .download-btn {
  background-color: rgb(29, 120, 139);
  font-weight: 700;
}
body main .info-display .phone-display {
  width: 332px;
  height: 545px;
  background-color: rgb(27, 27, 27);
  border-radius: 10px;
  animation: 1s ease-out 0s 1 phone-load;
}
@media (max-width: 1052px) {
  body main .info-display .phone-display {
    width: 332px;
    margin-bottom: 25px;
  }
}
@media (max-width: 433px) {
  body main .info-display .phone-display {
    width: 100%;
  }
}
body main .info-display .phone-display .phone-background {
  margin-top: 2%;
  width: 97%;
  height: 531px;
  background-color: rgb(1, 22, 26);
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.158) inset;
}
body main .info-display .phone-display .phone-background .header-items {
  color: white;
  font-size: 15px;
  opacity: 0.65;
}
body main .info-display .phone-display .phone-background .card-container {
  background-image: url("./Secondary Files/card-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
}
body main .info-display .phone-display .phone-background .card-container .card-info {
  font-size: 14px;
  color: rgb(154, 189, 169);
}
body main .info-display .phone-display .phone-background .card-container .card-info .cc-balance {
  font-weight: 700;
}
body main .info-display .phone-display .phone-background hr {
  width: 12%;
  border: dotted white 4px;
  border-bottom: none;
}
body main .info-display .phone-display .phone-background .spending-info .credit-limits, body main .info-display .phone-display .phone-background .spending-info .monthly-spend {
  background-color: rgb(29, 120, 139);
  border-radius: 10px;
  padding: 5px;
  width: 50%;
}
body main .info-display .phone-display .phone-background .spending-info .credit-limits p, body main .info-display .phone-display .phone-background .spending-info .monthly-spend p {
  font-size: 12px;
  margin-bottom: 5px;
  color: black;
  font-weight: 700;
}
body main .info-display .phone-display .phone-background .spending-info .credit-limits p span, body main .info-display .phone-display .phone-background .spending-info .monthly-spend p span {
  font-weight: 500;
  margin-right: 2px;
}
body main .info-display .phone-display .phone-background .spending-history {
  margin-top: 20px;
  width: 100%;
  color: rgb(154, 189, 169);
}
body main .info-display .phone-display .phone-background .spending-history h4 {
  margin: 20px 0px;
  font-size: 18px;
}
body main .info-display .phone-display .phone-background .spending-history .spends {
  width: 100%;
}
body main .info-display .phone-display .phone-background .spending-history .spends .location-time {
  font-size: 8px;
}
body main .info-display .phone-display .phone-background .spending-history .spends p {
  margin: 0px;
}
body main .info-display .phone-display .phone-background .spending-history .spends .spend-1, body main .info-display .phone-display .phone-background .spending-history .spends .spend-2, body main .info-display .phone-display .phone-background .spending-history .spends .spend-3 {
  font-size: 14px;
  width: 100%;
  row-gap: 24px;
}
body main .info-display .phone-display .phone-background .spending-history .spends .spend-1 .transaction-image, body main .info-display .phone-display .phone-background .spending-history .spends .spend-2 .transaction-image, body main .info-display .phone-display .phone-background .spending-history .spends .spend-3 .transaction-image {
  display: flex;
  flex-direction: row;
  background-color: rgb(29, 120, 139);
  padding: 2px 8px;
  height: 3svh;
  border-radius: 20px;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: black;
  font-size: 16px;
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styless.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <title>Payment Landing Page</title>
</head>
<body>

  <main>
    <!--NavBar-->
    <nav class="container d-flex justify-content-between flex-row">
      <div class="image-container">
        <img src="./Secondary Files/monzo-logo.png" alt="Logo" class="img-fluid logo" width="60">
      </div>
      <div class="sections-container">
        <ul class="d-flex justify-content-center flex-row unordered">
          <li class="li-0" id="li-0"><a href="/NavigationSection/features.html">Features</a></li>
          <li class="li-1" id="li-1"><a href="/NavigationSection/pricing.html">Pricing</a></li>
          <li class="li-2" id="li-2"><a href="/NavigationSection/help.html">Help</a></li>
          <li class="li-3" id="li-3"><a href="/NavigationSection/blog.html">Blog</a></li>
          <li class="li-4" id="li-4"><a href="/NavigationSection/about.html">About Us</a></li>
        </ul>
      </div>
      <div class="account-buttons d-flex flex-row column-gap-3">
        <a href="/AccountSection/accounts.html"><button class="login-btn btn px-4">
          Log In
        </button></a>
        <a href="/AccountSection/accounts.html"><button class="sign-up-btn btn px-4">
          Sign Up
        </button></a>
      </div>
    </nav>

    
    <!--Info section-->
    <section class="info-display d-flex justify-content-around align-items-center">
      <section class="info">
        <div class="information-details container d-flex align-items-left flex-column row-gap-4">
          <h6>START SAVING MONEY</h6>
          <h1>Smart Credit Card For Your Daily Life.</h1>
          <button class="download-btn btn">
            Download <i class="fa-regular fa-circle-down"></i>
          </button>
        </div>
      </section>

      <!--Phone Display-->
      <section class="phone-display">
        <div class="phone-holder px-0">
          <div class="phone container-fluid px-0">
            <!--Phone Main-->
            <div class="phone-background container-fluid">
              <div class="header-items container px-0 d-flex justify-content-between flex-row py-3">
                <i class="fa-solid fa-bars"></i>
                <p class="m-0">Welcome, Tom</p>
                <i class="fa-regular fa-bell"></i>
              </div>
              <div class="card-container container px-0">
                <div class="card-info container px-0 d-flex flex-column ps-4 pt-2">
                  <p class="cc-title mb-2">Balance</p>
                  <p class="cc-number mb-2">&bullet;&bullet;&bullet;&bullet; &bullet;&bullet;&bullet;&bullet; &bullet;&bullet;&bullet;&bullet; 9207</p>
                  <p class="cc-balance mb-2">£56,231</p>
                  <div class="brand-expiry d-flex flex-row justify-content-between">
                    <p class="cc-expiry mb-0-2">09/26</p>
                    <i class="fa-brands fa-cc-visa me-5 fs-4"></i>
                  </div>
                </div>
              </div>
              <hr class="mt-3 mx-auto">
              <div class="spending-info container px-0 d-flex justify-content-center flex-row column-gap-3 ">
                <div class="credit-limits">
                  <p>Credit Limits</p>
                  <p><span>£</span>5,000</p>
                </div>
                <div class="monthly-spend">
                  <p>Monthly Spend</p>
                  <p><span>£</span>2,240</p>
                </div>
              </div>
              <div class="spending-history container d-flex flex-column align-items-left col-xxl-1">
                <h4>History</h4>
                <div class="spends container-fluid d-flex align-items-start flex-row px-0">
                  <div class="spend-1 d-flex align-items-end flex-column me-4">
                    <div class="transaction-image mb-2"><i class="fa-solid fa-arrow-up"></i></div>
                    <div class="transaction-image mb-2"><i class="fa-solid fa-arrow-up"></i></div>
                    <div class="transaction-image"><i class="fa-solid fa-arrow-up"></i></div>
                  </div>
                  <div class="spend-2 d-flex align-items-left flex-column px-0">
                    <div class="location mb-1">
                      <p>Amazon</p>
                      <p class="location-time">Today</p>
                    </div>
                    <div class="location mb-1">
                      <p>Halfords</p>
                      <p class="location-time">Yesterday</p>
                    </div>
                    <div class="location mb-1">
                      <p>McDonald's</p>
                      <p class="location-time">Yesterday</p>
                    </div>
                  </div>
                  <div class="spend-3 d-flex align-items-left flex-column px-0">
                    <p class="mb-3 price">£46.99</p>
                    <p class="mb-3 price">£25</p>
                    <p class="price">£9.99</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </section>
  </main>
</body>
</html>