У меня есть страница с 3 панелями различий, например
когда я нажимаю на смс вкладку
в sms-панели фильтр работает для получения данных со стороны сервера с использованием OnClick = "btnsrchwish_Click", но проблема в том, что когда событие OnClick генерирует и перезагружает страницу, по умолчанию отображается первая панель
нравится
но я хочу показать панель смс при перезагрузке фильтра
я использую функцию javascript tab2primar(), и это вызов
protected void btnsrchwish_Click(object sender, EventArgs e)
{
BindSendSms();
ScriptManager.RegisterStartupScript(this, this.GetType(), "Success", "tab2primar();", true);
}
tab2primar() предназначен для автоматического щелчка по вкладке sms после фильтра, но это не работает
Javascript
<script>
function tab2primar() {
debugger;
$("#tab2primaryli").attr("#tab2primary")
$("#tab2primaryli").trigger("click");
return false;
}
<div class = "panel with-nav-tabs panel-primary">
<div class = "panel-heading">
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#tab1primary" data-toggle = "tab">New</a></li>
<li><a id = "tab2primaryli" href = "#tab2primary" data-toggle = "tab">SMS</a></li>
<li id = "tab3primaryli"><a href = "#tab3primary" data-toggle = "tab">Report</a></li>
<li class = "dropdown">
<a href = "#" data-toggle = "dropdown">Dropdown <span class = "caret"></span></a>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#tab4primary" data-toggle = "tab">Primary 4</a></li>
<li><a href = "#tab5primary" data-toggle = "tab">Primary 5</a></li>
</ul>
</li>
</ul>
</div>
<div class = "panel-body" style = "padding:10px;min-height:517px;">
<div class = "tab-content">
<%--GUEST DATA ENTRY--%>
<div class = "tab-pane fade in active" id = "tab1primary">
<div class = "container">
<div class = "row centered-form">
<div class = "col-xs-11 col-sm-11 col-md-11">
<div class = "panel panel-default">
<div class = "panel-heading" style = "padding: 15px;">
<h3 class = "panel-title" style = "font-size: 20px; float: left;">Guest Data Entry</h3>
<asp:Panel ID = "Panel1" runat = "server" DefaultButton = "btncheck" Style = "margin-top: -25px; margin-bottom: 34px;">
<input type = "text" style = "width: 15%; float: right;" name = "mobile" autocomplete = "off"
oninput = "this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')"
runat = "server" id = "txtmobileno" class = "form-control input-sm" placeholder = "Mobile No." />
<span id = "message"></span>
<asp:Button runat = "server" ID = "btncheck" Text = "btnsearch" OnClick = "btnsearch_Click" Style = "display: none;" OnClientClick = "check();" />
<asp:Button runat = "server" ID = "btnsearch" Text = "btnsearch" OnClick = "btnsearch_Click" Style = "display: none;" />
</asp:Panel>
</div>
<div class = "panel-body" >
<div class = "row">
<div class = "col-xs-6 col-sm-6 col-md-6">
<div class = "form-group">
<input type = "text" name = "first_name" runat = "server" id = "txtTitle" class = "form-control input-sm" placeholder = "Title" />
</div>
</div>
<div class = "col-xs-6 col-sm-6 col-md-6">
<div class = "form-group">
<input type = "text" name = "txtfirst_name" runat = "server" id = "txtfirst_name" class = "form-control input-sm" placeholder = "First Name" />
</div>
</div>
<div class = "col-xs-6 col-sm-6 col-md-6">
<div class = "form-group">
<input type = "text" name = "txtmiddle_name" runat = "server" id = "txtmiddle_name" class = "form-control input-sm" placeholder = "Middle Name" />
</div>
</div>
<div class = "col-xs-6 col-sm-6 col-md-6">
<div class = "form-group">
<input type = "text" name = "last_name" runat = "server" id = "txtLast_name" class = "form-control input-sm" placeholder = "Last Name" />
</div>
</div>
</div>
<div class = "form-group">
<input type = "text" name = "txtAddress1" runat = "server" id = "txtAddress1" class = "form-control input-sm" placeholder = "Address1" />
</div>
<div class = "form-group">
<input type = "text" name = "txtAddress2" runat = "server" id = "txtAddress2" class = "form-control input-sm" placeholder = "Address2" />
</div>
<div class = "row">
<div class = "col-xs-6 col-sm-6 col-md-6">
<div class = "form-group">
<input type = "text" name = "txtAnniversary" runat = "server" id = "txtAnniversary" class = "form-control input-sm" placeholder = "Anniversary" />
</div>
</div>
</div>
<div class = "row">
<div class = "col-xs-6 col-sm-6 col-md-6">
<div class = "form-group">
<asp:Button runat = "server" Text = "Save" ID = "btnsave" CssClass = "btn btn-info btn-block" OnClick = "btnsave_Click"></asp:Button>
</div>
</div>
<div class = "col-xs-6 col-sm-6 col-md-6">
<div class = "form-group">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%-- END OF GUEST DATA ENTRY--%>
<%-- SMS SEND --%>
<div class = "tab-pane fade" id = "tab2primary" runat = "server" >
<div class = "table-responsive">
<div class = "bootstrap-table">
<div class = "fixed-table-toolbar">
<div class = "bars pull-left">
<div id = "Div1">
<div class = "form-inline" role = "form">
</div>
</div>
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading" style = "padding: 12px; HEIGHT: 60PX;">
<h3 class = "panel-title" style = "font-size: 20px; float: left;">Send SMS</h3>
<div class = "toolbar clearfix">
<div class = "toolbar-left" style = "float: right">
<div class = "toolbar-right" style = "float: right">
<div class = "form-inline" role = "form">
<asp:DropDownList ID = "Ddlselect" AutoPostBack = "true" runat = "server" CssClass = "btn btn-default dropdown-toggle" OnSelectedIndexChanged = "Ddlselect_SelectedIndexChanged">
<%--<asp:ListItem Enabled = "true" Text = "Select" Value = "-1"></asp:ListItem>
<asp:ListItem Text = "BirthDay" Value = "1"></asp:ListItem>
<asp:ListItem Text = "Anniversary" Value = "2"></asp:ListItem>
<asp:ListItem Text = "Special" Value = "2"></asp:ListItem>--%>
</asp:DropDownList>
<label for = "dateStart">Date</label>
<input type = "text" runat = "server" class = "form-control" id = "calendar" placeholder = "Date" autocomplete = "off" />
<asp:Button runat = "server" ID = "btnsrchwish" Text = "Filter" CssClass = "btn btn-primary filter-dates" OnClick = "btnsrchwish_Click"></asp:Button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "fixed-table-container">
<div class = "fixed-table-header">
<table></table>
</div>
<div class = "fixed-table-body">
<asp:GridView ID = "GridView2" CssClass = "table table-striped table-hover" runat = "server" AutoGenerateColumns = "false">
<Columns>
<asp:TemplateField HeaderText = "Select">
<ItemTemplate>
<asp:CheckBox ID = "checkbox1" runat = "server" Checked = "true" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "SNo">
<ItemTemplate>
<%#Container.DataItemIndex+1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField = "GFname" HeaderText = "Name" />
<asp:BoundField DataField = "Address1" HeaderText = "Address 1" />
<asp:BoundField DataField = "Address2" HeaderText = "Address 2" />
<asp:BoundField DataField = "MobileNo" HeaderText = "Mobile No" />
<asp:BoundField DataField = "Location" HeaderText = "Location" />
<asp:BoundField DataField = "City" HeaderText = "City" />
</Columns>
</asp:GridView>
</div>
<input type = "text" style = "width: 90%;min-height:50px; float: left; font-size: 15px;font-weight: 600;" name = "txtlocation" autocomplete = "off" runat = "server" id = "txtmsg" class = "form-control input-sm" placeholder = "Message" />
<asp:Button runat = "server" ID = "btnsndwish" style = "margin-top: 15px;" Text = "Send SMS" CssClass = "btn btn-primary filter-dates" OnClick = "btnsndwish_Click"></asp:Button>
</div>
</div>
<div class = "clearfix"></div>
</div>
</div>
<%-- END OF SMS SEND --%>
<%-- REPORT --%>
<div class = "tab-pane fade" id = "tab3primary">
<div class = "table-responsive">
<div class = "bootstrap-table">
<div class = "fixed-table-toolbar">
<div class = "bars pull-left">
<div id = "toolbargrid">
<div class = "form-inline" role = "form">
</div>
</div>
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading" style = "padding: 12px; HEIGHT: 65px;">
<h3 class = "panel-title" style = "font-size: 20px; float: left;">Report</h3>
<div class = "toolbar clearfix">
<div class = "toolbar-left" style = "float: right;">
<div class = "btn-group">
<asp:DropDownList ID = "DropDownList1" runat = "server" CssClass = "btn btn-default dropdown-toggle">
<asp:ListItem Enabled = "true" Text = "Select" Value = "-1"></asp:ListItem>
<asp:ListItem Text = "First Name" Value = "1"></asp:ListItem>
<asp:ListItem Text = "Second Name" Value = "2"></asp:ListItem>
<asp:ListItem Text = "Last Name" Value = "2"></asp:ListItem>
<asp:ListItem Text = "Address 1" Value = "2"></asp:ListItem>
<asp:ListItem Text = "Address 2" Value = "2"></asp:ListItem>
<asp:ListItem Text = "Mobile No" Value = "2"></asp:ListItem>
</asp:DropDownList>
</div>
<div class = "toolbar-right" style = "float: right">
<div class = "form-inline" role = "form">
<input class = "form-control table-search" type = "text" placeholder = "Search" runat = "server" id = "txtsrch" />
<label for = "dateStart">Date From</label>
<input type = "text" runat = "server" class = "form-control" id = "calendar1" placeholder = "Date" autocomplete = "off" />
<label for = "dateStop">Date To</label>
<input type = "text" runat = "server" class = "form-control" id = "calendar2" placeholder = "Date" autocomplete = "off" />
<asp:Button runat = "server" ID = "btnreport" Text = "Filter" CssClass = "btn btn-primary filter-dates" OnClick = "btnreport_Click"></asp:Button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "fixed-table-container">
<div class = "fixed-table-header">
<table></table>
</div>
<div class = "fixed-table-body">
<asp:GridView ID = "GridView1" CssClass = "table table-striped table-hover" runat = "server" AutoGenerateColumns = "false">
<Columns>
<asp:TemplateField HeaderText = "SNo">
<ItemTemplate>
<%#Container.DataItemIndex+1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField = "GFname" HeaderText = "Name" />
<asp:BoundField DataField = "Address1" HeaderText = "Address 1" />
<asp:BoundField DataField = "Address2" HeaderText = "Address 2" />
<asp:BoundField DataField = "MobileNo" HeaderText = "Mobile No" />
<asp:BoundField DataField = "Location" HeaderText = "Location" />
<asp:BoundField DataField = "City" HeaderText = "City" />
</Columns>
</asp:GridView>
</div>
<div class = "fixed-table-pagination">
<div class = "pull-left pagination-detail">
<span class = "pagination-info">Showing 1 to 3 of 3 rows</span>
<span class = "page-list" style = "display: none;">
<span class = "btn-group dropup">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"><span class = "page-size">10</span> <span class = "caret"></span></button>
<ul class = "dropdown-menu" role = "menu">
<li class = "active"><a href = "javascript:void(0)">10</a></li>
</ul>
</span>
records per page
</span>
</div>
<div class = "pull-right pagination" style = "display: none;">
<ul class = "pagination">
<li class = "page-first disabled"><a href = "javascript:void(0)"><<</a></li>
<li class = "page-pre disabled"><a href = "javascript:void(0)"><</a></li>
<li class = "page-number active disabled"><a href = "javascript:void(0)">1</a></li>
<li class = "page-next disabled"><a href = "javascript:void(0)">></a></li>
<li class = "page-last disabled"><a href = "javascript:void(0)">>></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class = "clearfix"></div>
</div>
</div>
<%-- END OF REPORT --%>
<div class = "tab-pane fade" id = "tab4primary">Primary 4</div>
<div class = "tab-pane fade" id = "tab5primary">Primary 5</div>
</div>
</div>
</div>



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вам нужно добавить класс active на выбранную вкладку и удалить его из других. измените свой код, как указано ниже
function tab2primar() {
debugger;
$("#tab2primaryli").attr("#tab2primary");
$('ul.nav.nav-tabs li').removeClass('active'); // first remove active from all li
$("#tab2primaryli").closest('li').addClass('active');//add active class
$('div.tab-pane').removeClass('active');
$('#tab2primary').addClass('active');
return false;
}
Вам также необходимо активировать панель
проверьте с помощью отладчика, запускается ли указанный выше javascript после загрузки страницы или раньше, и есть ли какая-либо другая точка щелчка для вкладок
@Schadensbegrenzer, спасибо, что указали. Я обновил это в своем посте.
@aparnarai, не могли бы вы попробовать сейчас. Если он не работает, не могли бы вы поделиться для него рабочим jsfiddle, чтобы мы могли его отладить?
@BhushanKawadkar У меня активна смс-панель, но содержимое не отображается
@BhushanKawadkar add $ ('# tab2primary'). RemoveClass ('в активном состоянии'); $ ('# tab2primary'). addClass ('активен'); в вашей имплементации, и это будет работать
Вам нужно сделать код, как показано ниже
function tab2primar() {
debugger;
$('ul.nav.nav-tabs li').removeClass('active'); // remove active from all li
$("#tab2primaryli").click(); // 'active' class will be set automatically
return false;
}
Если при нажатии на вкладку вы вызываете какую-либо функцию, то лучше следовать указаниям Бхушана Кавадкара.
Я должен попробовать это, но все еще открыт панель ввода гостевых данных в фильтре