jquery - 隐藏一个 <div> 的内容并显示另一个具有不同内容的 <div>

Question

我有一个包含图片内容的div

             <div class="1">
               <div class="2">
                 <img src="img/aa.png"></img>

               </div>
               <div class="3">         
                 <img src="img/bb.png"></img>

               </div>
              <div class="4">         
               <img src="img/cc.png"></img>

               </div>
              </div>

我想用另一个不同内容的div替换它

          <div class="w">
             <div class="x">
                <h3>name</h3>
            <ul>
                   <li>bday</li>
                     <li>age</li>
            </ul>
               </div>
           </div> 

如何通过单击文本或超文本而不刷新或重新加载页面来交换此 div。这是要点击的文字

                     <div class="1a">
                        <a class="s" href="prof.htm">PROFILE</a>
                  </div>

我应该使用什么代码来隐藏/显示 div (我精通 HTML、CSS、JQUERY)

请帮助我....抱歉，我是新手并且对这个领域很感兴趣

Answer 1

$(".s").on("click",function(event) {
    event.preventDefault();
    if ($(".1").is(":visible"))  {
        $(".w").show();
        $(".1").hide();
    } else {
        $(".1").show();
        $(".w").hide();
    }
});

使用 jQuery，只需测试您想要的第一个元素是否可见(我假设 1 只是按照您发布的顺序)，并分别测试 hide()/show()

但是，当您单击该链接时，您将被重定向!

因此，添加 preventDefault 使其不执行更改页面的正常职责