需要有关如何在初始加载时默认为选项卡的帮助

用户名

我有一个带有3个选项卡(客户,合同和主要)的表单,当我加载页面时,我希望显示客户选项卡信息,但不显示。根据以下代码,我需要有关如何执行操作的帮助。这是.aspx页。

<style type="text/css">
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    font-size: 17px;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    font-size: 12px;
}
</style>
<script type="text/javascript">
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }


</script>

<div class="container">
    <%-- <div class="form-group">
          <div class="row">
          <div class="col-md-2 col-md-offset-1">            
            <label for="exampleRequestID">Request ID:</label>
           <label for="exampleRequestID">W235454</label><br />
            <label for="exampleDCNID">DCN ID:</label>
           <asp:Label ID="labelDCN" runat="server" Text="Label"></asp:Label>
          </div>
          </div>
   </div>--%>
    <%-- <div class="form-group">
          <div class="row">
          <div class="col-md-12">            
            <label for="exampleDCNID">DCN ID:</label>
           <label for="exampleDCNID">23525325</label>
          </div>
          </div>
   </div>--%>

    <!--RID -->
     <div class="row">
          <div class="col-md-2">            
            <label class="no-margin">Request ID: W235454</label><br />
            <label class="no-margin">DCN ID: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;S1103A1710</label>

          </div>
          </div>

   <br /><br />
  <div class="row">
      <div class="col-md-3">
          <h1 class="no-margin">New Service Request</h1>
      </div>
      <div class="col-md-2 col-md-offset-6">
          <asp:LinkButton ID="LinkButton1" runat="server">Back to LOD List</asp:LinkButton>
      </div>
  </div>



    <!--Step by Step Image-->
    <div class="row stepbystepimage">
      <asp:Image ID="Image1" runat="server" class="image-center" src="c:\users\travisnunnally\documents\visual studio 2010\Projects\NASALOD\NASALOD\images\Finalize.png" alt="" usemap="#Map" />
      <map id="Map1" name='Map'>
            <area shape='rect' coords='0,0,100,100' title='Customer Selection' href='http://pardev/LOD/default.aspx' alt="Customer Selection" />
            <area shape='rect' coords='148,-2,248,98' title='Contract Information' href='http://pardev/LOD/contractinfo.aspx' alt="Contract Information" />
            <area shape='rect' coords='275,-4,375,96' title='Prime Contractor' href='http://pardev/LOD/primecontractor.aspx' alt="Prime Contractor" />
            <area shape='rect' coords='398,-1,498,99' title='Service Set' href='http://pardev/LOD/services.aspx'  alt="Service Set"/>
            <area shape='rect' coords='536,-2,636,98' title='Points Of Contact' href='http://pardev/LOD/pointsofcontact.aspx' alt="Points Of Contact" />
            <area shape='rect' coords='680,-1,780,99' title='Attachments' href='http://pardev/LOD/fileupload.aspx' alt="Attachments" />
            <area shape='rect' coords='811,-3,911,97' title='Finalize' href='http://pardev/LOD/finalize.aspx' alt="Finalize" />
        </map>
  </div>
          <div class="form-group">
          <div class="row">
          <div class="col-xs-8 zero-padding-left col-md-offset-2">
             <span class="style1">
            <h2><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NASA LOD Summary</strong></h2></span> 
            </div>    
            </div>           
          </div>
    <!--Finalize Page Content-->
    <div class="finalize">
        <div class="container">
            <div class="row" style="margin-left: 220px;">
        <!-- Sidebar -->
        <!--div id="sidebar-wrapper" class="col-md-3"-->
        <div class="col-sm-3">
           <%-- <nav id="spy">
                <ul class="sidebar-nav nav">
                    <li class="customerinfo">
                        <a href="#">Customer Selection</a>
                    </li>
                    <li class="contractinfo">
                        <a href="#contractinfo"  data-scroll>
                            Contract Infomation
                        </a>
                    </li>
                    <li class="primecontractor" >
                        <a href="#primecontractor" data-scroll>
                            Prime Contractor
                        </a>
                    </li>
                    <li class="comments" >
                        <a href="#comments" data-scroll>
                            Comments
                        </a>
                    </li>
                </ul>
            </nav>
--%>

              <nav id="spy">
                <ul class="sidebar-nav nav">
                    <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Customer')">Customer</a></li>
                    <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Contract')">Contract</a></li>
                    <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Prime')">Prime</a></li>
                    <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Comments')">Comments</a></li>
                </ul>
            </nav>
        </div>


        <!-- Page content -->
        <!--div id="page-content-wrapper"-->
        <div class="col-sm-8" style="margin-left: 0px; width: 711px;">
                <div class="row active">
                    <div class="col-md-12 well tabcontent " id="Customer" style="width:546px;">
                     <span class="style1">           
                        <legend >Customer Selection</legend>
                        <div class="row">
                          <div class="col-md-5 spacing">Customer Source Code:</div>
                          <%--<div class="col-md-4""><asp:Label ID="lblCustSourceCode" runat="server" Text="Label" name="lblCustSourceCode"></asp:Label></div>--%>
                          <div class="col-md-4"">832 - NASA</div>
                        </div>
                        <div class="row">
                          <div class="col-md-5 spacing">Customer Code:</div>
                          <%--<div class="col-md-4""><asp:Label ID="lblCustCode" runat="server" Text="Label" name="lblCustCode"></div>--%>
                          <div class="col-md-4">555</div>
                        </div>
                        <div class="row">
                          <div class="col-md-5 spacing">Name:</div>
                          <%--<div class="col-md-4""><asp:Label ID="lblName" runat="server" Text="Label" name=""lblName"></div>--%>
                          <div class="col-md-4">Aeronautics Lab</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">City:</div>
                          <%--<div class="col-md-4""><asp:Label ID="lblCity" runat="server" Text="Label" name="lblCity"></div>--%>
                          <div class="col-md-4">Houston</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">State:</div>
                          <%--<div class="col-md-4""><asp:Label ID="lblState" runat="server" Text="Label" name="lblState"></div>--%>
                          <div class="col-md-4">Texas</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Zip:</div>
                          <%--<div class="col-md-4""><asp:Label ID="lblZip" runat="server" Text="Label" name="lblZip"></div>--%>
                          <div class="col-md-4">10001</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 well hi tabcontent" style="width:546px;" id="Contract">
                        <legend >Contract Information</legend>
                       <div class="row">
                          <div class="col-md-5 spacing">Nasa Control Number:</div>
                          <div class="col-md-4">4416367</div>
                        </div>
                        <div class="row">
                          <div class="col-md-5 spacing">Prime Contact Number<span style="color:red">*</span>:</div>
                          <div class="col-md-4">4416367</div>
                        </div>
                        <div class="row">
                          <div class="col-md-5 spacing">Contract Start Date:</div>
                          <div class="col-md-4">10/30/2016</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Face Value of Contact<span style="color:red">*</span>:</div>
                          <div class="col-md-4">10/30/2016</div>
                        </div>
                        <div class="row">
                          <div class="col-md-5 spacing">Contract End Item or Service:</div>
                          <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                          tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Authorize Redelegation<span style="color:red">*</span>:</div>
                          <div class="col-md-4">YES</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Estimated LOD Completion Date<span style="color:red">*</span>:</div>
                          <div class="col-md-4">10/30/2016</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Is your LOD ONLY for one specific Purchase Order or Delivery Order:</div>
                          <div class="col-md-4">No</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Contracting Officer:</div>
                          <div class="col-md-4">John G. Doe</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Date LOD Signed by Customer/Contracting Officer<span style="color:red">*</span>:</div>
                          <div class="col-md-4">08/11/2016</div>
                        </div>
                    </div>
                </div>



                  <div class="row">
                    <div class="col-md-12 well tabcontent" style="width:546px" id="Prime">
                        <legend>Prime Contractor</legend>
                       <div class="row">
                          <div class="col-md-5 spacing">CAGE:</div>
                          <div class="col-md-4">55524</div>
                        </div>
                        <div class="row">
                          <div class="col-md-5 spacing">Prime Contractor Name:</div>
                          <div class="col-md-4">Merrit Company</div>
                        </div>
                        <div class="row">
                          <div class="col-md-5 spacing">Address 1:</div>
                          <div class="col-md-4">555 Marietta Street</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Address 2:</div>
                          <div class="col-md-4"> </div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">City:</div>
                          <div class="col-md-4">Atlanta</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">State:</div>
                          <div class="col-md-4">Georgia</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Zip:</div>
                          <div class="col-md-4">30331</div>
                        </div>
                    </div>
                  </div>
</div>
虚拟世界

您可以激活“文档就绪”事件上的选项卡。

$(document).ready(function () {
    openCity('Customer');
});

唯一的问题是,此操作未发送,event因此此行将出现错误evt.currentTarget.className += " active";但是,如果删除该链接,则不会获得active该类。因此,如果将脚本更改为此,它将起作用。

function openCity(cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
        if (tablinks[i].innerHTML == cityName) {
            tablinks[i].className += " active";
        }
    }
    document.getElementById(cityName).style.display = "block";
}

并更改onclick="openCity(event, 'Customer')"onclick="openCity('Customer')"

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章