jquery - 当页面加载溢出内容时一致的滚动到底部
问题描述
我目前正在使用 Bootstrap 选项卡和自定义 CSS 使用最少的 JS/jQuery 进行聊天布局（消息的发送和接收将在编程期间稍后处理）。
.messages如果框的内容高于可用高度，我已经使用了一些 jQuery 使聊天框 div ( ) 滚动到底部。但是我遇到的一个问题是该脚本仅适用于活动选项卡窗格。在下面的示例中，您可以看到脚本通过将第一个选项卡窗格滚动到底部来完成其工作。但是如果我们切换到第四个选项卡，脚本就不再工作了。
有没有办法让消息滚动到我的默认底部？
编辑：这是一个便于查看的jsfiddle 链接，因为内联代码片段工具在此示例中效果不佳。一定要让预览面板更高。
$(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 & 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 & 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 & 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 & 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 & 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 & 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>解决方案
检查这是否对您有帮助？
我有点击按钮的动画。
$(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 & 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 & 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 & 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 & 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 & 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 & 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>推荐阅读
- git - GIT多个并发开发版本问题（不是GitHub）
- flutter - Dart 使用 putIfAbsent 初始化 Map 中的列表
- javascript - 为什么我收到错误：在我的节点服务器中连接 ECONNREFUSED？
- reactjs - 如何让 webpack 从 src/fonts 而不是直接从 src 加载字体？
- angular - 在 map 工作时使用 switchMap 调度操作失败
- azure-application-insights - 有多少个 Log Analytics 工作区可用于多个 Application Insights 实例？
- python - 在 GOOGLE COLAB 中运行此 python 代码时，它显示错误。谁能告诉我我做错了什么并分享更正的代码？
- java - 如何从另一个 java 类访问和更新变量？
- javascript - 道具没有通过
- node.js - pm2 重新加载后，我会丢失存储在 Node.js 项目中异步队列中的数据吗？