使用 Jquery 單擊時顯示 div 的問題
如果你運行我的代碼片段並開始點擊,你會看到像梅賽德斯、船或房子這樣的 div,這很好,但問題是當你第一次運行這個片段時,什麼都不會顯示,你需要點擊一些東西,這不是辦法去。 我怎樣才能讓第一個 div 從一開始就可見,然後你就可以隨意更改 div。 注意 我需要更改 div,因為在我的實際文件中有內容
$(".listOrderNavPC a").on("click",function(e) { e.preventDefault() $(".categoryInfoWrapper").hide(); $("#"+$(this).find(".textOrderPC").text()).show().fadeIn(500); })
.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; } .categoryInfoWrapper { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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>
回答
你可以使用 JavaScript 如另一個答案中所述,或者您可以使用 CSS 隱藏除第一個之外的所有內容。
.categoryInfoWrapper:not(:first-child) { display: none; }
$(".listOrderNavPC a").on("click",function(e) { e.preventDefault() $(".categoryInfoWrapper").hide(); $("#"+$(this).find(".textOrderPC").text()).show().fadeIn(500); })
.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; } .categoryInfoWrapper:not(:first-child) { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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>