我有一个包含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: 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> 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>
答案 0 :(得分：0)
我建议使用Javascript来＆＃34;点击＆＃34;加载页面后立即显示选项卡。
document.getElementById("some_random_id").click();
并将此ID添加到激活标签
的链接 <li><a href="javascript:void(0)" class="tablinks" id = "some_random_id" onclick="openCity(event,'Customer')">Customer</a></li>
答案 1 :(得分：0)
您可以激活Document Ready事件中的标签。
$(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')"