使用javascript和divstyles显示新的HTML代码

Question

我有一个消息页面，显示您当前的消息。但问题是，它只显示一条消息，而这是“最新”消息。我点击它的第一个消息栏，它不会显示HTML代码，即使它删除了“没有邮件选择”

如果我按下第二个消息选项卡，就会看到以下内容：https://i.imgur.com/hMjftkm.png

我的问题是，第一个消息选项卡它不会显示它的HTML代码。当我更改消息选项卡（单击新选项卡）时，它将不会实现新代码。它显示相同的代码布局。

我发现错误是在javascript中，在MAILCONTENT（1或2），但我不知道如何解决它

JavaScript的

<script>
$(document).ready(function() {
  $('.emailcontent input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
      $(this).closest('.list-group-item').addClass('selected');
    } else {
      $(this).closest('.list-group-item').removeClass('selected');
    }
  });

  // Clicking a message
  $('.list-group-item > .media').click(function() {

    $('.list-group-item').each(function() {
      $(this).removeClass('active');
    });

    $(this).parent().addClass('active').removeClass('unread');
    $('.nomail').addClass('hide');
    $('.mailcontent').removeClass('hide');
  });

 $('.list-group-item > .media2').click(function() {

    $('.list-group-item').each(function() {
      $(this).removeClass('active');
    });



    $(this).parent().addClass('active').removeClass('unread');
    $('.nomail2').addClass('hide');
    $('.mailcontent').removeClass('hide');
  });

});
</script>

HTML

  <div class="mainpanel">
    <div class="emailcontent">
      <div class="email-options">

        <label class="ckbox">
        </label>
      </div><!-- email-options -->
      <div class="list-group">
        <div class="list-group-item unread">
          <div class="list-left">
            <label class="ckbox">
            </label>
            </div>
          <div class="media">
            <div class="media-left">
              <img class="media-object img-circle" src="../images/photos/user1.png" alt="">
            </div>
            <div class="media-body">
              <span class="pull-right">1 hour ago</span>
              <h5 class="media-heading">Sendername1</h5>
              <h5>Title1</h5>
            </div>
            <p>Hi. There's something wri..</p>
          </div>
        </div>

                <div class="list-group-item unread">
          <div class="list-left">
            <label class="ckbox">
            </label>
            </div>
          <div class="media2">
            <div class="media-left">
              <img class="media-object img-circle" src="../images/photos/user1.png" alt="">
            </div>
            <div class="media-body">
              <span class="pull-right">1 hour ago</span>
              <h5 class="media-heading">Sendername2</h5>
              <h5>Title2</h5>
            </div>
            <p>That's title2 that means yo...</p>
          </div>
        </div>
    </div><!-- emailcontent -->

 <div class="contentpanel emailpanel">
      <h3 class="nomail">No mail selected</h3>
      <div class="mailcontent hide">
        <div class="email-header">
          <div class="pull-right">
            2 hour ago &nbsp;


          </div>
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object img-circle" src="../images/photos/user1.png" alt="">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Sendername1</h4>
              to: me
            </div>
          </div><!-- media -->
        </div><!-- email-header -->

        <hr>

        <h3 class="email-subject">MESSAGE1</h3>
        <div class="email-body">
          <p>Text1</p>


      </div><!-- mailcontent -->

    </div><!-- contentpanel --><!-- mailcontent -->
     <div class="contentpanel emailpanel">
      <h3 class="nomail">No mail selected</h3>
      <div class="mailcontent hide">
        <div class="email-header">
          <div class="pull-right">
            2 hour ago &nbsp;


          </div>
          <div class="media2">
            <div class="media-left">
              <a href="#">
                <img class="media-object img-circle" src="../images/photos/user1.png" alt="">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Title2</h4>
              to: me
            </div>
          </div><!-- media -->
        </div><!-- email-header -->

        <hr>

        <h3 class="email-subject">MESSAGE2</h3>
        <div class="email-body">
          <p>That's message 2</p>

      </div><!-- mailcontent -->

    </div><!-- contentpanel --><!-- mailcontent -->
  </div><!-- mainpanel -->  
  </div><!-- mainpanel -->


    </div><!-- emailcontent -->
</div>
</div>

CODEPEN https://codepen.io/anon/pen/KxGjWp

Answer 1

第一：可能你应该重新设计一下你的代码。但是，如果你只是希望它按原样运行，这里有解决方案：

HTML：

  <div class="mainpanel">
    <div class="emailcontent">
      <div class="email-options">

        <label class="ckbox">
        </label>
      </div><!-- email-options -->
      <div class="list-group">
        <div class="list-group-item unread">
          <div class="list-left">
            <label class="ckbox">
            </label>
            </div>
          <div class="media">
            <div class="media-left">
              <img class="media-object img-circle" src="../images/photos/user1.png" alt="">
            </div>
            <div class="media-body">
              <span class="pull-right">1 hour ago</span>
              <h5 class="media-heading">Sendername</h5>
              <h5>Title!</h5>
            </div>
            <p>This is messagebar1. Clicking it will show TITLE1.</p>
          </div>
        </div>

                <div class="list-group-item unread">
          <div class="list-left">
            <label class="ckbox">
            </label>
            </div>
          <div class="media2">
            <div class="media-left">
              <img class="media-object img-circle" src="../images/photos/user1.png" alt="">
            </div>
            <div class="media-body">
              <span class="pull-right">1 hour ago</span>
              <h5 class="media-heading">sendername2</h5>
              <h5>Title2</h5>
            </div>
            <p>This is messagebar2. Clicking it will show TITLE2</p>
          </div>
        </div>
    </div><!-- emailcontent -->
 <div class="contentpanel emailpanel">
      <h3 class="nomail">No mail selected</h3>
      <div class="mailcontent hide">
        <div class="email-header">
          <div class="pull-right">
            2 hour ago &nbsp;


          </div>
          <div class="media2">
            <div class="media-left">
              <a href="#">
                <img class="media-object img-circle" src="../images/photos/user1.png" alt="">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">SENDER1</h4>
              to: me
            </div>
          </div><!-- media -->
        </div><!-- email-header -->

        <hr>

        <h3 class="email-subject">TITLE1</h3>
        <div class="email-body">
          <p>So this should be message1</p>
        </div>

        <br>
        <hr>

      </div><!-- mailcontent -->
   <div class="mailcontent2 hide">
        <div class="email-header">
          <div class="pull-right">
            2 hour ago &nbsp;


          </div>
          <div class="media2">
            <div class="media-left">
              <a href="#">
                <img class="media-object img-circle" src="../images/photos/user1.png" alt="">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">sendername2</h4>
              to: me
            </div>
          </div><!-- media -->
        </div><!-- email-header -->

        <hr>

        <h3 class="email-subject">TITLE 2</h3>
        <div class="email-body">
          <p>So there is message2 layout. But if I click messagebar1 it won't show it's content and delete this or vice-versa</p>
        </div>

      </div><!-- mailcontent -->

  </div><!-- mainpanel -->  
  </div><!-- mainpanel -->

JavaScript的：

$(document).ready(function() {
  $('.emailcontent input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
      $(this).closest('.list-group-item').addClass('selected');
    } else {
      $(this).closest('.list-group-item').removeClass('selected');
    }
  });

  // Clicking a message
  $('.list-group-item > .media').click(function() {

    $('.list-group-item').each(function() {
      $(this).removeClass('active');
    });

    $(this).parent().addClass('active').removeClass('unread');
    $('.nomail').addClass('hide');
    $('.mailcontent').removeClass('hide');
    $('.mailcontent2').addClass('hide');
  });   

 $('.list-group-item > .media2').click(function() {

    $('.list-group-item').each(function() {
      $(this).removeClass('active');
    });



    $(this).parent().addClass('active').removeClass('unread');
    $('.nomail').addClass('hide');
    $('.mailcontent2').removeClass('hide');
    $('.mailcontent').addClass('hide');
  });

});

所以问题是，即使你隐藏了mailcontent2，它的包装div仍然是可见的，而mailcontent是可见的，但在那个空div下。我将mailcontent移动到同一容器div下。我建议你在加载时创建一个包含消息的对象数组，并为每个左面板菜单项id分配与该消息的数组索引相同，然后你只能有一个mailcontent并从数组中为它分配不同的文本。

也可以在浏览器中使用开发控制台（通常是F12），你可以将鼠标悬停在元素上并查看其尺寸和位置，这样就可以看到第二个邮件容器位于第一个邮件容器之上。此外，您可以禁用，启用和编辑快速css并运行javascript命令，这样您就可以构建合适的样式并立即看到它的外观。