ไม่สามารถนำทางเนื้อหาในแถบด้านข้างได้เมื่อฉันใช้ iframe สำหรับแต่ละเนื้อหา

ดังนั้นฉันจึงมีเพจของฉันที่มีแถบนำทางด้านบน แถบด้านข้าง และเนื้อหาอยู่ทางด้านขวา ตอนนี้ฉันได้ออกแบบหน้าเว็บแล้ว แต่ฉันรู้สึกว่ามันซ้ำกัน ดังนั้นฉันจึงพยายามใช้ iframe ทางด้านขวา (อันที่จะเปลี่ยนแปลงเมื่อลิงก์ในแถบด้านข้างมีการเปลี่ยนแปลง) ฉันหวังว่าคุณจะเข้าใจความคิด

ตอนนี้ ปัญหาคือฉันสามารถนำทางไปยังแท็ก iframe ที่สองจากแท็กที่ 1 ได้ แต่ไม่ใช่จากแท็ก iframe ที่สองไปยังแท็กแรก

นี่คือรหัส HTML:

        <div class="container-fluid side-content">

          <iframe src="carsx-iframe.html" id="car-frame" height="100%" width="100%" style="outline: none; border:none; "></iframe>

          <iframe src="edit-profile-iframe.html" id="edit-prof" height="1050px" width="100%" style="outline: none; border-style: none;"></iframe>

        </div>

Js:

$(document).ready(function() {
  $("#edit-prof-click").click(function() {
    $("#edit-prof").show();
  });
});

 $(document).ready(function() {
  $("#cars").click(function() {
    $("#car-frame").show();
  });
});

ซีเอสเอส

#edit-prof{
  display: none;
}

#car-frame{
  display: none;
}