当页面在溢出的内容上加载时，滚动到底部始终一致

时间：2018-08-16 12:01:52

标签： jquery css bootstrap-tabs

我目前正在使用Bootstrap标签和自定义CSS来使用最少的JS / jQuery进行聊天布局（消息的发送和接收将在以后的编程中进行）。

如果聊天框div的内容高于可用高度，我已经使用了一些jQuery使聊天框div（.messages）滚动到底部。但是我遇到的一个问题是该脚本仅适用于活动的选项卡窗格。在下面的示例中，您可以通过将第一个标签窗格滚动到底部来查看脚本的工作。但是，如果我们切换到第四个标签，该脚本将无法再使用。

有没有一种方法可以将邮件默认滚动到底部？

编辑：这里有一个jsfiddle link，可以轻松查看，因为内联代码段工具在此示例中无法正常运行。一定要使预览面板更高。

$(document).ready(function(){
  // Scroll the chat messages to bottom
  $(".messages").animate({
    scrollTop: $('.messages').prop("scrollHeight")
  }, 1000);
});
.inbox-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #ccc; }
  .inbox-section .message-sidebar {
    width: 320px;
    background: #fff;
    border-right: 1px solid #ddd; }
    .inbox-section .message-sidebar .nav-tabs {
      border: none; }
      .inbox-section .message-sidebar .nav-tabs li {
        float: none; }
        .inbox-section .message-sidebar .nav-tabs li.active a {
          background: #eeeeee; }
          .inbox-section .message-sidebar .nav-tabs li.active a:hover {
            background: #eeeeee; }
            .inbox-section .message-sidebar .nav-tabs li.active a:hover h6 {
              color: #000; }
            .inbox-section .message-sidebar .nav-tabs li.active a:hover p {
              color: #777777; }
          .inbox-section .message-sidebar .nav-tabs li.active a h6 {
            color: #000; }
          .inbox-section .message-sidebar .nav-tabs li.active a p {
            color: #777777; }
        .inbox-section .message-sidebar .nav-tabs li + li {
          border-top: 1px solid #ddd; }
        .inbox-section .message-sidebar .nav-tabs li a {
          border: none;
          border-radius: 0;
          margin: 0;
          padding: 16px; }
          .inbox-section .message-sidebar .nav-tabs li a h6 {
            color: #555555; }
          .inbox-section .message-sidebar .nav-tabs li a p {
            color: #aaa; }
          .inbox-section .message-sidebar .nav-tabs li a:hover {
            background: #fff; }
            .inbox-section .message-sidebar .nav-tabs li a:hover h6 {
              color: #000; }
            .inbox-section .message-sidebar .nav-tabs li a:hover p {
              color: #777777; }
    .inbox-section .message-sidebar .message-preview h6,
    .inbox-section .message-sidebar .message-preview p {
      margin: 0;
      line-height: 1; }
    .inbox-section .message-sidebar .message-preview h6 {
      color: #000;
      font-size: 16px;
      margin-bottom: 6px; }
      .inbox-section .message-sidebar .message-preview h6:after {
        content: " ";
        display: table; }
      .inbox-section .message-sidebar .message-preview h6:after {
        clear: both; }
      .inbox-section .message-sidebar .message-preview h6 .label {
        float: right;
        padding: 0.25em 0.5em 0.25em;
        border-radius: 10px; }
    .inbox-section .message-sidebar .message-preview > p {
      font-size: 14px;
      color: #777777;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
      .inbox-section .message-sidebar .message-preview > p strong:after {
        content: ':'; }
  .inbox-section .message-holder {
    width: 100%;
    padding: 20px;
    padding-right: 0;
    background: #fff; }
    .inbox-section .message-holder .messages-header {
      margin: 0 20px 20px 0;
      padding-bottom: 16px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      border-bottom: 1px solid #ddd; }
      .inbox-section .message-holder .messages-header h5 {
        margin: 0; }
      .inbox-section .message-holder .messages-header .buttons {
        list-style: none;
        margin: 0;
        padding: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 20px; }
        .inbox-section .message-holder .messages-header .buttons li + li {
          margin-left: 8px; }
        .inbox-section .message-holder .messages-header .buttons li a {
          display: block;
          width: 32px;
          height: 32px;
          line-height: 30px;
          text-align: center; }
    .inbox-section .message-holder .messages {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      overflow-y: scroll;
      height: 300px;
      padding-right: 20px; }
      .inbox-section .message-holder .messages .received,
      .inbox-section .message-holder .messages .sent {
        border-radius: 10px;
        padding: 12px;
        font-size: 14px;
        line-height: 1.25; }
        .inbox-section .message-holder .messages .received + .sent,
        .inbox-section .message-holder .messages .received + .received,
        .inbox-section .message-holder .messages .sent + .sent,
        .inbox-section .message-holder .messages .sent + .received {
          margin-top: 24px; }
        .inbox-section .message-holder .messages .received p,
        .inbox-section .message-holder .messages .sent p {
          margin: 0; }
          .inbox-section .message-holder .messages .received p + p,
          .inbox-section .message-holder .messages .sent p + p {
            margin-top: 8px; }
        .inbox-section .message-holder .messages .received .name,
        .inbox-section .message-holder .messages .sent .name {
          font-size: 14px;
          font-style: italic;
          margin-bottom: 8px; }
          .inbox-section .message-holder .messages .received .name strong,
          .inbox-section .message-holder .messages .sent .name strong {
            font-size: 16px;
            font-style: normal; }
        .inbox-section .message-holder .messages .received .time,
        .inbox-section .message-holder .messages .sent .time {
          font-size: 12px;
          font-style: italic;
          text-align: right;
          margin-top: 8px; }
      .inbox-section .message-holder .messages .received {
        background: #eeeeee;
        margin-right: 48px;
        color: #555555; }
        .inbox-section .message-holder .messages .received .name {
          color: #222222; }
        .inbox-section .message-holder .messages .received .time {
          color: #aaa; }
      .inbox-section .message-holder .messages .sent {
        background: #238def;
        margin-left: 48px;
        color: #fff; }
        .inbox-section .message-holder .messages .sent .name {
          color: #fff; }
        .inbox-section .message-holder .messages .sent .time {
          color: #b1d7f9; }
    .inbox-section .message-holder .text-area {
      margin: 20px 20px 0 0;
      padding-top: 20px;
      border-top: 1px solid #ddd; }
      .inbox-section .message-holder .text-area textarea {
        resize: none;
        height: 100px !important; }
      .inbox-section .message-holder .text-area p {
        margin: 0;
        margin-top: 20px; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="inbox-section">
  <div class="message-sidebar">
    <ul class="nav nav-tabs" role="tablist">
      <li class="active">
        <a href="#message1" class="message-preview" data-toggle="tab">
          <h6>ABC Treks &amp; Travels Pvt. Ltd.</h6>
          <p><strong>You</strong> Thanks for the info. What's your number?</p>
        </a>
      </li>
      <li>
        <a href="#message2" class="message-preview" data-toggle="tab">
          <h6>Everest Trekking <span class="label label-danger">4</span></h6>
          <p><strong>Everest Trekking</strong> Yes sir, we do provide a lot of discount offers during the season</p>
        </a>
      </li>
      <li>
        <a href="#message3" class="message-preview" data-toggle="tab">
          <h6>Sunrise Travels Pvt. Ltd.</h6>
          <p><strong>You</strong> Inventore modi eveniet harum.</p>
        </a>
      </li>
      <li>
        <a href="#message4" class="message-preview" data-toggle="tab">
          <h6>Safari From The East</h6>
          <p><strong>Safari From The East</strong> Quod iure eos eveniet animi maiores fuga sint aliquam.</p>
        </a>
      </li>
    </ul>
  </div>
  <div class="message-holder">
    <div class="tab-content">
      <div class="tab-pane active" id="message1">
        <div class="messages-header">
          <h5>ABC Treks &amp; Travels</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="received">
            <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum suscipit repellendus doloribus, ad quidem pariatur error temporibus commodi.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat blanditiis optio, ad magni ducimus minus laudantium mollitia, sequi et dolorem, quo, laborum nihil architecto saepe error. Velit ipsum quis consequatur, non doloremque quae tenetur.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Thanks for the info.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message2">
        <div class="messages-header">
          <h5>Everest Trekking</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat blanditiis optio, ad magni ducimus minus laudantium mollitia, sequi et dolorem, quo, laborum nihil architecto saepe error. Velit ipsum quis consequatur, non doloremque quae tenetur.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>Everest Trekking</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Thanks for the info.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message3">
        <div class="messages-header">
          <h5>Sunrise Travels Pvt. Ltd.</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="received">
            <div class="name"><strong>Sunrise Travels Pvt. Ltd.</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Thanks for the info.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message4">
        <div class="messages-header">
          <h5>Safari From The East</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="received">
            <div class="name"><strong>Safari From The East</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi placeat consectetur iste iusto inventore ipsam porro aliquid, facere similique neque eum repudiandae possimus doloremque. Voluptatum modi non vel consequuntur repellendus libero earum, labore eaque, veritatis, nisi quos eveniet dolore cum dignissimos aliquam atque aliquid similique hic molestias quod. Consectetur, magni.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Thanks for the info. Consectetur adipisicing elit. Nulla incidunt vel maiores atque, quaerat ab.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>Safari From The East</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quibusdam dicta porro animi ipsum aspernatur cum vitae ex eos architecto, delectus, sed laudantium. Quasi repellat ad veniam ullam hic! Voluptas!</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Consectetur adipisicing elit quaerat ab.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

检查这是否对您有帮助？

我在单击按钮时就设置了动画。

$(document).ready(function() {
  // Scroll the chat messages to bottom
  var tabID, wrapHeight;
  $(".messages").animate({
    scrollTop: $('.messages').prop("scrollHeight")
  }, 1000);
  $('.nav a').click(function() {
    tabID = $(this).attr("href");
    setTimeout(function() {
      wrapHeight = $(tabID + " .msgWrapper").height();
      $(tabID + " .messages").animate({
        scrollTop: wrapHeight
      }, 1000);
    }, 0);
  });
});
.inbox-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.inbox-section .message-sidebar {
  width: 320px;
  background: #fff;
  border-right: 1px solid #ddd;
}

.inbox-section .message-sidebar .nav-tabs {
  border: none;
}

.inbox-section .message-sidebar .nav-tabs li {
  float: none;
}

.inbox-section .message-sidebar .nav-tabs li.active a {
  background: #eeeeee;
}

.inbox-section .message-sidebar .nav-tabs li.active a:hover {
  background: #eeeeee;
}

.inbox-section .message-sidebar .nav-tabs li.active a:hover h6 {
  color: #000;
}

.inbox-section .message-sidebar .nav-tabs li.active a:hover p {
  color: #777777;
}

.inbox-section .message-sidebar .nav-tabs li.active a h6 {
  color: #000;
}

.inbox-section .message-sidebar .nav-tabs li.active a p {
  color: #777777;
}

.inbox-section .message-sidebar .nav-tabs li+li {
  border-top: 1px solid #ddd;
}

.inbox-section .message-sidebar .nav-tabs li a {
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 16px;
}

.inbox-section .message-sidebar .nav-tabs li a h6 {
  color: #555555;
}

.inbox-section .message-sidebar .nav-tabs li a p {
  color: #aaa;
}

.inbox-section .message-sidebar .nav-tabs li a:hover {
  background: #fff;
}

.inbox-section .message-sidebar .nav-tabs li a:hover h6 {
  color: #000;
}

.inbox-section .message-sidebar .nav-tabs li a:hover p {
  color: #777777;
}

.inbox-section .message-sidebar .message-preview h6,
.inbox-section .message-sidebar .message-preview p {
  margin: 0;
  line-height: 1;
}

.inbox-section .message-sidebar .message-preview h6 {
  color: #000;
  font-size: 16px;
  margin-bottom: 6px;
}

.inbox-section .message-sidebar .message-preview h6:after {
  content: " ";
  display: table;
}

.inbox-section .message-sidebar .message-preview h6:after {
  clear: both;
}

.inbox-section .message-sidebar .message-preview h6 .label {
  float: right;
  padding: 0.25em 0.5em 0.25em;
  border-radius: 10px;
}

.inbox-section .message-sidebar .message-preview>p {
  font-size: 14px;
  color: #777777;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.inbox-section .message-sidebar .message-preview>p strong:after {
  content: ':';
}

.inbox-section .message-holder {
  width: 100%;
  padding: 20px;
  padding-right: 0;
  background: #fff;
}

.inbox-section .message-holder .messages-header {
  margin: 0 20px 20px 0;
  padding-bottom: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
}

.inbox-section .message-holder .messages-header h5 {
  margin: 0;
}

.inbox-section .message-holder .messages-header .buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 20px;
}

.inbox-section .message-holder .messages-header .buttons li+li {
  margin-left: 8px;
}

.inbox-section .message-holder .messages-header .buttons li a {
  display: block;
  width: 32px;
  height: 32px;
  line-height: 30px;
  text-align: center;
}

.inbox-section .message-holder .messages {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-y: scroll;
  height: 300px;
  padding-right: 20px;
}

.inbox-section .message-holder .messages .received,
.inbox-section .message-holder .messages .sent {
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.25;
}

.inbox-section .message-holder .messages .received+.sent,
.inbox-section .message-holder .messages .received+.received,
.inbox-section .message-holder .messages .sent+.sent,
.inbox-section .message-holder .messages .sent+.received {
  margin-top: 24px;
}

.inbox-section .message-holder .messages .received p,
.inbox-section .message-holder .messages .sent p {
  margin: 0;
}

.inbox-section .message-holder .messages .received p+p,
.inbox-section .message-holder .messages .sent p+p {
  margin-top: 8px;
}

.inbox-section .message-holder .messages .received .name,
.inbox-section .message-holder .messages .sent .name {
  font-size: 14px;
  font-style: italic;
  margin-bottom: 8px;
}

.inbox-section .message-holder .messages .received .name strong,
.inbox-section .message-holder .messages .sent .name strong {
  font-size: 16px;
  font-style: normal;
}

.inbox-section .message-holder .messages .received .time,
.inbox-section .message-holder .messages .sent .time {
  font-size: 12px;
  font-style: italic;
  text-align: right;
  margin-top: 8px;
}

.inbox-section .message-holder .messages .received {
  background: #eeeeee;
  margin-right: 48px;
  color: #555555;
}

.inbox-section .message-holder .messages .received .name {
  color: #222222;
}

.inbox-section .message-holder .messages .received .time {
  color: #aaa;
}

.inbox-section .message-holder .messages .sent {
  background: #238def;
  margin-left: 48px;
  color: #fff;
}

.inbox-section .message-holder .messages .sent .name {
  color: #fff;
}

.inbox-section .message-holder .messages .sent .time {
  color: #b1d7f9;
}

.inbox-section .message-holder .text-area {
  margin: 20px 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

.inbox-section .message-holder .text-area textarea {
  resize: none;
  height: 100px !important;
}

.inbox-section .message-holder .text-area p {
  margin: 0;
  margin-top: 20px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="inbox-section">
  <div class="message-sidebar">
    <ul class="nav nav-tabs" role="tablist">
      <li class="active">
        <a href="#message1" class="message-preview" data-toggle="tab">
          <h6>ABC Treks &amp; Travels Pvt. Ltd.</h6>
          <p><strong>You</strong> Thanks for the info. What's your number?</p>
        </a>
      </li>
      <li>
        <a href="#message2" class="message-preview" data-toggle="tab">
          <h6>Everest Trekking <span class="label label-danger">4</span></h6>
          <p><strong>Everest Trekking</strong> Yes sir, we do provide a lot of discount offers during the season</p>
        </a>
      </li>
      <li>
        <a href="#message3" class="message-preview" data-toggle="tab">
          <h6>Sunrise Travels Pvt. Ltd.</h6>
          <p><strong>You</strong> Inventore modi eveniet harum.</p>
        </a>
      </li>
      <li>
        <a href="#message4" class="message-preview" data-toggle="tab">
          <h6>Safari From The East</h6>
          <p><strong>Safari From The East</strong> Quod iure eos eveniet animi maiores fuga sint aliquam.</p>
        </a>
      </li>
    </ul>
  </div>
  <div class="message-holder">
    <div class="tab-content">
      <div class="tab-pane active" id="message1">
        <div class="messages-header">
          <h5>ABC Treks &amp; Travels</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="msgWrapper">
            <div class="received">
              <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum suscipit repellendus doloribus, ad quidem pariatur error temporibus commodi.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat blanditiis optio, ad magni ducimus minus laudantium mollitia, sequi et dolorem, quo, laborum nihil architecto saepe error. Velit ipsum quis consequatur, non doloremque quae
                tenetur.
              </p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Thanks for the info.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message2">
        <div class="messages-header">
          <h5>Everest Trekking</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="msgWrapper">
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat blanditiis optio, ad magni ducimus minus laudantium mollitia, sequi et dolorem, quo, laborum nihil architecto saepe error. Velit ipsum quis consequatur, non doloremque quae
                tenetur.
              </p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>Everest Trekking</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Thanks for the info.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message3">
        <div class="messages-header">
          <h5>Sunrise Travels Pvt. Ltd.</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="msgWrapper">
            <div class="received">
              <div class="name"><strong>Sunrise Travels Pvt. Ltd.</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Thanks for the info.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message4">
        <div class="messages-header">
          <h5>Safari From The East</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="msgWrapper">
            <div class="received">
              <div class="name"><strong>Safari From The East</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi placeat consectetur iste iusto inventore ipsam porro aliquid, facere similique neque eum repudiandae possimus doloremque. Voluptatum modi non vel consequuntur repellendus
                libero earum, labore eaque, veritatis, nisi quos eveniet dolore cum dignissimos aliquam atque aliquid similique hic molestias quod. Consectetur, magni.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Thanks for the info. Consectetur adipisicing elit. Nulla incidunt vel maiores atque, quaerat ab.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>Safari From The East</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quibusdam dicta porro animi ipsum aspernatur cum vitae ex eos architecto, delectus, sed laudantium. Quasi repellat ad veniam ullam hic! Voluptas!</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Consectetur adipisicing elit quaerat ab.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题