javascript - 使用 javascript 和 divstyles 显示新的 html 代码

标签 javascript html css

我有一个显示您当前消息的消息页面。但问题是，它只显示一条消息，那是“最新”的消息。我点击它的第一个消息栏，它不会显示 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>

密码本 https://codepen.io/anon/pen/KxGjWp

最佳答案

首先:您可能应该稍微重新设计一下代码。 但是如果你只是想让它按原样工作，这里是解决方案:

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 之下。我将两个邮件内容都移到了同一个容器 div 下。我建议您在加载时创建一个包含消息的对象数组，并将与该消息的数组索引相同的每个左侧面板菜单项 ID 分配给它，然后您只能有一个邮件内容，并从数组中为其分配不同的文本.

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

关于javascript - 使用 javascript 和 divstyles 显示新的 html 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52381524/

上一篇：javascript - 如何在移动版本中单击导航链接时隐藏引导菜单

下一篇：css - 使用 CSS3 变量不起作用来设置背景图像 url？

相关文章：

javascript - 正则表达式:必须存在的组，但事先未知它将在哪里

javascript - onclick 如何发布到新页面？

javascript - 如何在使用 babel 编译的 es6 中强制执行 no-extend-native？

javascript - 使用javascript获取div元素的值并将其放入数组中

javascript - Swiper 禁用左右半/部分滑动

javascript - 通过父元素 ID 和子类向子元素添加类

jquery - 如何添加响应式选项卡菜单和收缩 li 菜单项 Bootstrap？

javascript - 井字游戏 (js)

javascript - 页面加载后运行功能但不刷新

html - 如何使用 Bootstrap 在按钮之间设置间距

©2024 IT工具网  联系我们