[英]How can i load div on Page Load based on ID value
I am using JQuery
SlideUp
and slideDown
methods to show/hide
panels.我使用JQuery
SlideUp
和slideDown
方法来show/hide
面板。 How can load or display the first record Contact information as a default?如何默认加载或显示第一条记录联系人信息?
Right now it loads blank because i set the panel display:none
: <div class="panel rpspanel panel-default" id="@item.ID" style="display: none">
otherwise it loads all if i have multiple results.现在它加载空白,因为我设置了面板display:none
: <div class="panel rpspanel panel-default" id="@item.ID" style="display: none">
否则,如果我有多个结果,它会加载所有.
Need help to load the first one when the page loads.需要帮助在页面加载时加载第一个。 And the rest on click event which working perfect.其余的点击事件完美运行。
Left Panel:左面板:
Pass the item id (or any unique value) to the li
in data-id
attribute将项目 id(或任何唯一值)传递给data-id
属性中的li
<ul id="treeview">
@foreach (var item in rpInfo)
{
<li data-expanded="true" class="panel-handler" data-id="@item.id">
<i class="fa fa-check-circle"></i>@item.PartyName
<ul>
<li data-expanded="true"> <i class="fas fa-check-circle"></i> @item.ContactName </li>
</ul>
</li>
}
</ul>
Right Panel:右面板:
id attribute
to all panels.所有面板的id attribute
。 the same id
which i have passed in the left panel.与我在左侧面板中传递的id
相同。
@foreach (var item in rpInfo)
{
var DeleteModal = "#myModal" + item.ID;
var mid = "myModal" + item.ID;
<div class="panel rpspanel panel-default" id="@item.ID" style="display: none">
Contact Information</h4>
</div>
<div class="panel-body">
<div class="card card-understated">
<div class="card-heading">
<h4>@(Localizer["Contact Preview "])</h4>
</div>
<div class="card-body">
<p>
@item.ContactName<br>
@item.ContactTitle<br>
@item.PartyName<br>
@item.AddressLine1<br />
@item.City, @item.State @item.Country
</p>
</div>
</div>
</div>
</div>
}
Jquery script: jQuery 脚本:
On on left panel on li click
get the data-id
attribute value.在li click
左侧面板上li click
获取data-id
属性值。
Hide all panels .隐藏所有面板。
Show the panel with the specified id attribute.显示具有指定 id 属性的面板。
$(document).ready(function() {
$(".panel-handler").click(function() {
let id = $(this).data("id");
$(".rpspanel").slideUp();
$("#" +id).slideDown();
});
});
Make a separate function
for the slideDown()
functionality based on id
, and pass id
of the first .panel-handler
on load of document:根据id
为slideDown()
功能slideDown()
一个单独的function
,并在加载文档时传递第一个.panel-handler
id
:
$(document).ready(function() {
$(".panel-handler").click(function() {
showInfo($(this).data("id"));
});
function showInfo(id){
$(".rpspanel").slideUp();
$("#" +id).slideDown();
}
// For first time
showInfo($(".panel-handler").eq(0).data("id"))
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.