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），并分别隐藏（）/ show（）

但是，当您点击该链接时，您将被重定向！

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

Answer 2

您可以使用类创建包装器div并像我一样为链接定义id，如果要切换或使用.hide（）和.show（），如果您只是想隐藏，则使用Jquery的.toggle（）并展示一次。

以下是工作示例 - http://jsfiddle.net/X59tp/2/

这是代码

 $( "#clicker" ).click(function() {
  $( ".toggler" ).toggle( "fast" );
});

希望它有所帮助。

Answer 3

检查以下链接..

JSFiddle

<script type="javascript">
    $(".s").on("click",function() {
       if ($(".1").is(":visible"))  {
           $(".w").show();
           $(".1").hide();
       } else {
           $(".1").show();
           $(".w").hide();
       }
   });
</script>

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

3 个答案: