Как автоматически щелкнуть по тегу привязки с помощью jquery / Javascript?

У меня есть страница с 3 панелями различий, например Как автоматически щелкнуть по тегу привязки с помощью jquery / Javascript? когда я нажимаю на смс вкладку Как автоматически щелкнуть по тегу привязки с помощью jquery / Javascript? в sms-панели фильтр работает для получения данных со стороны сервера с использованием OnClick = "btnsrchwish_Click", но проблема в том, что когда событие OnClick генерирует и перезагружает страницу, по умолчанию отображается первая панель нравитсяКак автоматически щелкнуть по тегу привязки с помощью jquery / Javascript? но я хочу показать панель смс при перезагрузке фильтра

я использую функцию 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>
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                                                <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" />
                                                        &nbsp;&nbsp;&nbsp;
                                                       <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>
                                                                    &nbsp;&nbsp;&nbsp;
                                                            <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" />
                                                                    &nbsp;&nbsp;&nbsp;

                                                                    <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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
791
2

Ответы 2

Вам нужно добавить класс 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;   
}

Я должен попробовать это, но все еще открыт панель ввода гостевых данных в фильтре

aparna rai 03.08.2018 11:16

Вам также необходимо активировать панель

Schadensbegrenzer 03.08.2018 11:24

проверьте с помощью отладчика, запускается ли указанный выше javascript после загрузки страницы или раньше, и есть ли какая-либо другая точка щелчка для вкладок

Bhushan Kawadkar 03.08.2018 11:24

@Schadensbegrenzer, спасибо, что указали. Я обновил это в своем посте.

Bhushan Kawadkar 03.08.2018 11:28

@aparnarai, не могли бы вы попробовать сейчас. Если он не работает, не могли бы вы поделиться для него рабочим jsfiddle, чтобы мы могли его отладить?

Bhushan Kawadkar 03.08.2018 11:28

@BhushanKawadkar У меня активна смс-панель, но содержимое не отображается

aparna rai 03.08.2018 12:21

@BhushanKawadkar add $ ('# tab2primary'). RemoveClass ('в активном состоянии'); $ ('# tab2primary'). addClass ('активен'); в вашей имплементации, и это будет работать

aparna rai 03.08.2018 13:06

Вам нужно сделать код, как показано ниже

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;   
}

Если при нажатии на вкладку вы вызываете какую-либо функцию, то лучше следовать указаниям Бхушана Кавадкара.

Другие вопросы по теме