javascript - 单击将一个 div 替换为另一个

Question

在这个jsfiddle你可以看到我的 html 代码。您可以看到右侧的所有内容都是可见的，我想在单击时替换 div，这样当用户单击左侧 div 上的汽车链接时，右侧的汽车是可见的，以此类推，以此类推。我不能只替换文本，因为内容将由后端生成，并且这些 div 会有一些逻辑

.grid-container-order {
  display: grid;
  grid-template-columns: 0.4fr 1.1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "leftOrderCol rightOrderCol";
  width: 60vw;
  margin-left: 20vw;
  margin-top: 5vh;
}

.leftOrderCol {
  grid-area: leftOrderCol;
}

.rightOrderCol {
  padding-top: 2vh;
  grid-area: rightOrderCol;
  border-left: 1px solid rgb(240, 240, 240);
}

.listOrderNavMobile {
  display: none;
}

.lineOrderPC {
  width: 90%;
  margin-left: 5%;
  height: 1px;
  background: rgb(238, 238, 238);
  margin-top: 1vh;
}

.listOrderWrapper {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}

.userWelcomeOrderPC {
  font-size: 18px;
  padding-bottom: 1vh;
  padding-left: 1vw;
}

.userNamePC {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -1px;
}

.linkOrderPC {
  position: relative;
  display: flex;
  width: 80%;
  align-items: center;
  font-size: 15px;
  line-height: 25px;
  padding: 12px 16px;
  color: rgb(0, 0, 0);
}

.linkOrderPC:hover {
  background: rgb(250, 250, 250);
  color: rgb(0, 0, 0);
}

.iconOrderPC {
  font-size: 22px;
  margin-right: 15px;
}

@media (max-width:950px) {
  .listOrderNavPC {
    display: none;
  }
  .listOrderNavMobile {
    display: block;
  }
  .categoryRootMobileOrder {
    height: 100%;
    display: grid;
    place-items: center;
    --gutter: 10px;
  }
  .hsOrder {
    grid-gap: 5px;
    grid-template-columns: 10px repeat(3, calc(35% - var(--gutter) * 2)) 10px;
  }
  .userWelcomeOrderMobile {
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
  }
  .userNameMobile {
    font-weight: 600;
    letter-spacing: -1px;
    font-size: 21px;
  }
}

<div class="grid-container-order">
  <div class="leftOrderCol">
    <div class="listOrderWrapper">
      <div class="listOrderNavPC">

        <a href="" class="linkOrderPC">
          <span class="iconOrderPC"></span>
          <span class="textOrderPC">Cars</span>
        </a>
        <a href="" class="linkOrderPC">
          <span class="iconOrderPC"></span>
          <span class="textOrderPC">Houses</span>
        </a>
        <a href="" class="linkOrderPC">
          <span class="iconOrderPC"></span>
          <span class="textOrderPC">boats</span>
        </a>


      </div>
    </div>
  </div>
  <div class="rightOrderCol">
    <div class="container-fluid">

      <div class="categoryInfoWrapper" id="Car">
        <div class="divCarsStyle">
          Mercedes
        </div>
      </div>
      <div class="categoryInfoWrapper" id="Houses">
        <div class="divHousesStyle">
          Mansion
        </div>
      </div>
      <div class="categoryInfoWrapper" id="Boats">
        <div class="divBoatsStyle">
          Boats
        </div>
      </div>

    </div>
  </div>
</div>

标签： javascriptjquery

Answer 1

Make sure the text and the IDs matched

If you cannot change the text, we can use a data-attribute

I added css

.categoryInfoWrapper { display: none; }

$(".listOrderNavPC a").on("click",function(e) {
  e.preventDefault()
  $(".categoryInfoWrapper").hide();
  $("#"+$(this).find(".textOrderPC").text()).show();
})

.grid-container-order {
  display: grid;
  grid-template-columns: 0.4fr 1.1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "leftOrderCol rightOrderCol";
  width: 60vw;
  margin-left: 20vw;
  margin-top: 5vh;
}

.leftOrderCol {
  grid-area: leftOrderCol;
}

.rightOrderCol {
  padding-top: 2vh;
  grid-area: rightOrderCol;
  border-left: 1px solid rgb(240, 240, 240);
}

.listOrderNavMobile {
  display: none;
}

.lineOrderPC {
  width: 90%;
  margin-left: 5%;
  height: 1px;
  background: rgb(238, 238, 238);
  margin-top: 1vh;
}

.listOrderWrapper {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}

.userWelcomeOrderPC {
  font-size: 18px;
  padding-bottom: 1vh;
  padding-left: 1vw;
}

.userNamePC {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -1px;
}

.linkOrderPC {
  position: relative;
  display: flex;
  width: 80%;
  align-items: center;
  font-size: 15px;
  line-height: 25px;
  padding: 12px 16px;
  color: rgb(0, 0, 0);
}

.linkOrderPC:hover {
  background: rgb(250, 250, 250);
  color: rgb(0, 0, 0);
}

.iconOrderPC {
  font-size: 22px;
  margin-right: 15px;
}

@media (max-width:950px) {
  .listOrderNavPC {
    display: none;
  }
  .listOrderNavMobile {
    display: block;
  }
  .categoryRootMobileOrder {
    height: 100%;
    display: grid;
    place-items: center;
    --gutter: 10px;
  }
  .hsOrder {
    grid-gap: 5px;
    grid-template-columns: 10px repeat(3, calc(35% - var(--gutter) * 2)) 10px;
  }
  .userWelcomeOrderMobile {
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
  }
  .userNameMobile {
    font-weight: 600;
    letter-spacing: -1px;
    font-size: 21px;
  }
}

.categoryInfoWrapper { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-container-order">
  <div class="leftOrderCol">
    <div class="listOrderWrapper">
      <div class="listOrderNavPC">

        <a href="" class="linkOrderPC">
          <span class="iconOrderPC"></span>
          <span class="textOrderPC">Cars</span>
        </a>
        <a href="" class="linkOrderPC">
          <span class="iconOrderPC"></span>
          <span class="textOrderPC">Houses</span>
        </a>
        <a href="" class="linkOrderPC">
          <span class="iconOrderPC"></span>
          <span class="textOrderPC">Boats</span>
        </a>


      </div>
    </div>
  </div>
  <div class="rightOrderCol">
    <div class="container-fluid">

      <div class="categoryInfoWrapper" id="Cars">
        <div class="divCarsStyle">
          Mercedes
        </div>
      </div>
      <div class="categoryInfoWrapper" id="Houses">
        <div class="divHousesStyle">
          Mansion
        </div>
      </div>
      <div class="categoryInfoWrapper" id="Boats">
        <div class="divBoatsStyle">
          Boats
        </div>
      </div>

    </div>
  </div>
</div>