如何使用jquery / Javascript自动单击锚标记?

时间:2018-08-03 09:08:00

标签: javascript jquery asp.net

我有一个页面,其中包含3个差异面板,例如enter image description here 当我点击短信标签enter image description here时 在短信面板过滤器中,使用OnClick="btnsrchwish_Click"可以从服务器端获取数据,但是问题是,当OnClick事件生成并重新加载页面时,默认情况下显示第一个面板 喜欢enter image description here 但是我想在过滤器重新加载时显示短信面板

我正在使用JavaScript函数tab2primar(),并且在

上调用
 protected void btnsrchwish_Click(object sender, EventArgs e)
{
    BindSendSms();
    ScriptManager.RegisterStartupScript(this, this.GetType(), "Success", "tab2primar();", true);
}

tab2primar()用于过滤后的“自动点击短信”标签,但无法正常工作 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>

3 个答案:

答案 0 :(得分:1)

您需要将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;   
}

答案 1 :(得分:1)

您需要执行以下代码

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

如果在单击选项卡时调用任何函数,则最好按照Bhushan Kawadkar的指示进行操作

答案 2 :(得分:1)

 <script>
        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');
            $('#tab2primary').removeClass('in active'); // add for expend
            $('#tab2primary').addClass('in active');
            return false;
        }