javascript - 使用选项卡正确显示表格-6ren

javascript - 使用选项卡正确显示表格

转载作者：行者123 更新时间：2023-11-28 02:24:22

我有一个带有可折叠容器的订单跟踪系统，其中包含带有不同表格的选项卡。但是，每当用户单击第二个订单号并选择一个选项卡时，该表将不会显示它应该在的位置，而是显示在第一个订单号表上。例如，我选择订单号 67890 并将其标记为物流，它应该在 67890 行显示物流表，但它保持静态并在订单号 12345 的第一行显示该表。

如何显示对应于所选订单号和标签的表格？请帮忙

jQuery(document).ready(function() {
   jQuery('.closedArrow').click(function() {
         $(this).parents('tr').children('.expanded').toggle();
         $(this).parents('tr').children('.collapsed').toggle();
         $(this).toggleClass( "openArrow" );    
    });
});
</script>

<script type="text/javascript">
function addRow(){
	var table = document.getElementById("Section3_table");
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);
	
	
	row.insertCell(0).innerHTML = '<input type="text" name="issue[]" required/>';
	row.insertCell(1).innerHTML = '<input type="text" name="details[]" size="20" required/>';
	row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}	

function deleteRow(obj) {
     
    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("Section3_table");
    table.deleteRow(index);
   
}

.closedArrow {
	<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px; -->	
	padding-left: 20px;
	padding-bottom: 10px;
	padding-top: 4px; 
	cursor:pointer;
}

.openArrow {
	<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px; -->
	padding-left: 20px;
	cursor:pointer;
}

.steps {
    margin:0 0 20px;
    padding:0;
    list-style:none;
    overflow:hidden;
}

.green {
	background:#7dba00 !important; 
	color: #666666 !important;
}

.grey {
	color: #666666 !important;
}

.open .green:after  {
	border-left-color: #7dba00 !important;
}

.wrap .num.last:after {
	display:none
}
.wrap .num.last:before {
	display:none
}

.black {
	background:#000 !important; 
	color:#fff!important;
}

.open .black:after  {
	border-left-color: #000 !important; 
	color:#fff!important;
}

.steps li {
	float:left;
	position:relative;
}

.wrap {
	float:left;
}

.num {
    width:30px;
    height:30px;
    line-height:30px;
    border-radius:50%;
    background:#7dba00;
    color:#000;
    font-weight:bold;
    text-align:center;
    float:left;
    position:relative;
    margin:0 4px 0 0;
}

.num b, .steps p span {
	position:relative;
	z-index:2; 
	display:block;
}

.num:after {
    content:" ";
    width: 0;
    height: 0;
    border-top: 14px solid #fff;
    border-bottom: 14px solid #fff;
    border-left: 14px solid #7dba00;
    position:absolute;
    right:-4px;
    top:1px;
}

.steps p {
    background: #fff;
	margin: 0;
	float: left;
	height: 30px;
	line-height: 14px;
	font-size: 10px;
	width: 10em;
	padding: 0 10px 0 0px;
	text-align: center;
}


.closed .num:after {
	border-left-color:#000
}

.closed .num {
	color:#fff;
	background:#000
}

.closed .num.last:after {
	display:none
}

.open .num:after {
    border-left-color:#ccc;
    border-top-color:transparent;
    border-bottom-color:transparent;
    z-index:1;
}

.open .num:before {
    width: 0;
    height: 0;
    content:" ";
    position:absolute;
    border-top: 15px solid #fff;
    border-bottom: 15px solid #fff;
    border-left: 15px solid #7dba00;
    position:absolute;
    right:-5px;
    top:0;
    z-index:0;
}

.open .num {
	background:#ccc;
}

.open .wrap {
	border-radius:15px 0 0 15px;
	border:1px solid #7dba00;
}

li.open:after {
    content:" ";
    width: 0;
    height: 0;
    border-top: 16px solid #fff;
    border-bottom: 16px solid #fff;
    border-left: 15px solid #7dba00;
    position:absolute;
    right:0;
    top:0;
    z-index:0;
}

li.open:before {
    width: 0;
    height: 0;
    content:" ";
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 14px solid #fff;
    position:absolute;
    right:1px;
    top:1px;
    z-index:1;
}

.expanded {
	display:none;
	<!--bbackground-color: red;-->
	padding-right: 900px;
}

.tab {
	<!--background-color: yellow; -->
	<!--border: 2px solid black; -->
	border-collapse: collapse;
	box-shadow: inset 0 1px 0 #fff;
	font-size: 12px;
	line-height: 15px;
	text-align: left;
	width: 85%;
	margin-left: 230px;
}

.column {
    float: left;
    width: 25%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}
 
  
.completed span {
    background-color:NONE;
    color:#95db89;
    border:2px solid #95db89;
}

.todo span {
    background-color:none;
    color:#E1E6EB;
    border:2px solid #E1E6EB;
}
  
.list span {
	color:#58D68D;
	font-weight:500;
	font-size: 12px;
}
    
.breadcrumb-pagination div p {
    text-align:center;
    line-height:0;
    margin:30px auto 25px;
 }
    
.active p {
   border-bottom:2px solid #00abc9;
   padding-bottom:27px;
   margin-bottom:0px !important;
   color: #3c4043;
   font-weight:700;  
}

    
.completed p {
    color:#bsb7c1;
  }
 
.list p {
    color:#3c4043;
	font-weight:700;
  }

.completed span::before { 
  content: '\2713' 
}

.title{
	text-align:center;
	text-decoration: none;
	margin-left: 365px;
	color: #444;
}

table {
	border-collapse: collapse;
	box-shadow: inset 0 1px 0 #fff;	
	font-size: 15px;
	line-height: 15px;
	text-align: left;
	width: 98%;
}	

th {
	background: linear-gradient(#000000, #4d4d4d);
	border-left: 1px solid #555;
	border-right: 1px solid #777;
	border-top: 1px solid #555;
	border-bottom: 1px solid #333;
	box-shadow: inset 0 1px 0 #999;
	color: #fff;
    font-weight: bold;
	padding: 10px 15px;
	position: relative;
	text-shadow: 0 1px 0 #000;	
}

th:after {
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
	content: '';
	display: block;
	height: 15%;
	left: 0;
	margin: 1px 0 0 0;
	position: absolute;
	top: 25%;
	width: 100%;
}

th:first-child {
	border-left: 1px solid #777;	
	box-shadow: inset 1px 1px 0 #999;
}

th:last-child {
	box-shadow: inset -1px 1px 0 #999;
}

td {
	border-right: 1px solid #fff;
	border-left: 1px solid #e8e8e8;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #e8e8e8;
	padding: 8px ;
	position: relative;
	transition: all 300ms;
}

td:first-child {
	box-shadow: inset 1px 0 0 #fff;
}	

td:last-child {
	border-right: 1px solid #e8e8e8;
	box-shadow: inset -1px 0 0 #fff;
}	

tr {
	background: url(https://jackrugile.com/images/misc/noise-diagonal.png);	
}

tr:nth-child(odd) td {
	background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);	
}

tr:last-of-type td {
	box-shadow: inset 0 -1px 0 #fff; 
}

tr:last-of-type td:first-child {
	box-shadow: inset 1px -1px 0 #fff;
}	

tr:last-of-type td:last-child {
	box-shadow: inset -1px -1px 0 #fff;
}

h1 {
	color: #444;
	text-shadow: 
    1px 0px 1px #ccc, 0px 1px 1px #eee, 
    2px 1px 1px #ccc, 1px 2px 1px #eee,
    3px 2px 1px #ccc, 2px 3px 1px #eee,
    4px 3px 1px #ccc, 3px 4px 1px #eee,
    5px 4px 1px #ccc, 4px 5px 1px #eee,
    6px 5px 1px #ccc, 5px 6px 1px #eee,
    7px 6px 1px #ccc;
}

a:hover,a:focus{
    outline: none;
    text-decoration: none;
}

.tab { 
	text-align: center;	
}

.tab .nav-tabs{
    display: inline-block;
    position: relative;
    border-bottom: none;
}

.tab .nav-tabs li{
    margin: 0;
}

.tab .nav-tabs li a{
    display: block;
    padding: 80px 25px 0 25px;
    background: #fff;
    font-size: 17px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    text-align: center;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid #fff;
    margin-right: 0;
    overflow: hidden;
    z-index: 1;
    position: relative;
    transition: all 0.3s ease 0s;
}

.tab .nav-tabs li a span {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: #f2f2f2;
    margin: auto;
    font-size: 22px;
    color: #999;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    transform: rotate(45deg);
}

.tab .nav-tabs li.active a span{
    background: #29335c;
    color: #fff;
}

.tab .nav-tabs li a span i{
    transform: rotate(-45deg);
}

.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover{
    color: black;
    border: none;
    border-bottom: 2px solid #fff;
}

.tab .nav-tabs li.active a{
    border-bottom: 2px solid #29335c;
}

.tab .tab-content{
    padding: 30px 0 0 19px;
    margin-top: -5px;
    font-size: 15px;
    color: black;
    line-height: 26px;
    text-align: left;
    border-top: 1px solid #e5e5e5;
	width: 600px;
}

.tab .tab-content .tab-pane #Section3_table {
	margin-left: -8px;
}

.tab .tab-content h3{
    font-size: 24px;
    margin-top: 0;
}

@media only screen and (max-width: 479px){
    .tab .nav-tabs li{
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }
    .tab .nav-tabs li:last-child{
        margin-bottom: 0;
    }
}

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
  <tr>
    <th>ORDER NUMBER</th>
	<th>CUSTOMER NAME</th>
    <th>LOCATION</th> 
  </tr>

<form action="save.php" method="POST">
    <td valign="top"><span class="closedArrow"> 12345 </span></td>
	<td valign="top"><span class="closedArrow"> JOHN </span></td>
    <td valign="top" class="collapsed"><ol class="steps">
        <li>
                <div class="num green"><b>1</b></div>
        </li>
        <li>
                <div class="num green"><b>2</b></div>
        </li>
		<li>
                <div class="num green"><b>3</b></div>
        </li>
		<li>
                <div class="num green"><b>4</b></div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num grey"><b>5</b></div>
                        <p><span>SHIPPING</span><span>IN PROGRESS</span></p>
                </div>
        </li>
		<li class="closed">
                <div class="num"><b>6</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>7</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>8</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>9</b></div>
        </li>
        <li class="closed">
                <div class="num last"><b>10</b></div>
        </li>

</ol></td>
   <td colspan="2" class="expanded">
  <ol class="steps">
        <li class="open">
                <div class="wrap">
                        <div class="num green"><b>1</b></div>
                        <p><span>ORDER</span><span>Done: 03/18/2019</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num green"><b>2</b></div>
                        <p><span>PACKING</span><span>Done: 03/18/2019</span></p>
                </div>
        </li>
		<li class="open">
                <div class="wrap">
                        <div class="num green"><b>3</b></div>
                        <p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num green"><b>4</b></div>
                        <p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num grey"><b>5</b></div>
                        <p><span>SHIPPING</span><span>ONGOING</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num black"><b>6</b></div>
                        <p><span>COURIER</span><span>NOT YET DONE </span></p>
                </div>
        </li>
		<li class="open">
                <div class="wrap">
                        <div class="num black"><b>7</b></div>
                        <p><span>DELIVERY</span><span>NOT YET DONE </span></p>
                </div>
        
        <li class="open">
                <div class="wrap">
                        <div class="num black last"><b>10</b></div>
                        <p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
                </div>
        </li>
</ol><hr>
<div class="tableDiv">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="tab" role="tabpanel">
                <center>
                <ul class="nav nav-tabs" role="tablist" style="width: 800px">
                    <li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
					<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
                </ul>
                
				
                <div class="tab-content tabs">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <table border="2px">
							<tr><th>ITEM</th><th>DETAILS</th></tr>
							<tr><td>Bag</td><td>1pc; Green</td></tr>
							<tr><td>Pouch</td><td>1pc; Blue</td></tr>
							<tr><td>Necklace</td><td>1pc; Heart shape; Gold</td></tr>
							<tr><td>Shoes</td><td>1 pair; Red; Size 6</td></tr>
						</table><br><hr>
                    </div>
					
					
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <table border="2px">
							<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
							<tr><td>NAME</td><td>John Smith</td></tr>
							<tr><td>SHIPPING ADDRESS</td><td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td></tr>
							<tr><td>TELEPHONE NUMBER</td><td>754-3010</td></tr>
						</table>
                    </div>
					
					
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
					<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
					<table id="Section3_table" name="Section3">
					<tr><th>ISSUE</th><th>DETAILS</th></tr> 
							<tr><td></td><td></td></tr>
					</center></table><br><hr>
                    </div>
					
					
					<div role="tabpanel" class="tab-pane fade" id="Section4">
                        <table border="2px">
							<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
							<tr><td></td><td></td><td></td></tr>
						</table><br><hr>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
	<td valign="top"><span class="closedArrow"> JANE </span></td>
    <td valign="top" class="collapsed"><ol class="steps">
        <li class="open">
                <div class="wrap">
                        <div class="num grey"><b>1</b></div>
                        <p><span>PACKING</span><span>IN PROGRESS</span></p>
                </div>
        </li>
        <li class="closed">
                <div class="num"><b>2</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>3</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>4</b></div>
        </li>
        <li class="closed">
                <div class="num"><b>5</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>6</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>7</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>8</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>9</b></div>
        </li>
        <li class="closed">
                <div class="num last"><b>10</b></div>
        </li>

</ol></td>
   <td colspan="2" class="expanded">
  <ol class="steps">
        <li class="open">
                <div class="wrap">
                        <div class="num green"><b>1</b></div>
                        <p><span>ORDER</span><span>ONGOING</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num black"><b>2</b></div>
                        <p><span>PACKING</span><span>NOT YET DONE</span></p>
                </div>
        </li>
		<li class="open">
                <div class="wrap">
                        <div class="num black"><b>3</b></div>
                        <p><span>CHECKING</span><span>NOT YET DONE</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num black"><b>4</b></div>
                        <p><span>RECHECKING</span><span>NOT YET DONE</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num black"><b>5</b></div>
                        <p><span>SHIPPING</span><span>NOT YET DONE</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num black"><b>6</b></div>
                        <p><span>COURIER</span><span>NOT YET DONE</span></p>
                </div>
        </li>
		<li class="open">
                <div class="wrap">
                        <div class="num black"><b>7</b></div>
                        <p><span>DELIVERY</span><span>NOT YET DONE</span></p>
                </div>
        
        <li class="open">
                <div class="wrap">
                        <div class="num black last"><b>10</b></div>
                        <p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
                </div>
        </li>
</ol><hr>


<div class="tableDiv">

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="tab" role="tabpanel">
                <center>
                <ul class="nav nav-tabs" role="tablist" style="width: 800px">
                    <li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
					<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
                </ul>
                
				
                <div class="tab-content tabs">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <table border="2px">
							<tr><th>ITEM</th><th>DETAILS</th></tr>
							<tr><td>Dress</td><td>1pc; Yellow</td></tr>
							<tr><td>Hat</td><td>1pc; Green</td></tr>
						</table><br><hr>
                    </div>
					
					
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <table border="2px">
							<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
							<tr><td>NAME</td><td>Jane Doe</td></tr>
							<tr><td>SHIPPING ADDRESS</td><td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td></tr>
							<tr><td>TELEPHONE NUMBER</td><td>1-541-754-3010</td></tr>
						</table>
                    </div>
					
					
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
					<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
					<table id="Section3_table" name="Section3">
					<tr><th>ISSUE</th><th>DETAILS</th></tr> 
							<tr><td></td><td></td></tr>
					</center></table><br><hr>
                    </div>
					
					
					<div role="tabpanel" class="tab-pane fade" id="Section4">
                        <table border="2px">
							<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
							<tr><td></td><td></td><td></td></tr>
						</table><br><hr>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

最佳答案

主要问题来自重复的 id，#Section1、#Section2、#Section3、#Section4 我已将第二行中的它们更改为 #Section5、#Section6、#Section7 ,#Section8，您可以看到它有效。

注意:id在同一个文档中必须是唯一的。

.closedArrow {
  <!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px;
  -->padding-left: 20px;
  padding-bottom: 10px;
  padding-top: 4px;
  cursor: pointer;
}

.openArrow {
  <!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px;
  -->padding-left: 20px;
  cursor: pointer;
}

.steps {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.green {
  background: #7dba00 !important;
  color: #666666 !important;
}

.grey {
  color: #666666 !important;
}

.open .green:after {
  border-left-color: #7dba00 !important;
}

.wrap .num.last:after {
  display: none
}

.wrap .num.last:before {
  display: none
}

.black {
  background: #000 !important;
  color: #fff!important;
}

.open .black:after {
  border-left-color: #000 !important;
  color: #fff!important;
}

.steps li {
  float: left;
  position: relative;
}

.wrap {
  float: left;
}

.num {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #7dba00;
  color: #000;
  font-weight: bold;
  text-align: center;
  float: left;
  position: relative;
  margin: 0 4px 0 0;
}

.num b,
.steps p span {
  position: relative;
  z-index: 2;
  display: block;
}

.num:after {
  content: " ";
  width: 0;
  height: 0;
  border-top: 14px solid #fff;
  border-bottom: 14px solid #fff;
  border-left: 14px solid #7dba00;
  position: absolute;
  right: -4px;
  top: 1px;
}

.steps p {
  background: #fff;
  margin: 0;
  float: left;
  height: 30px;
  line-height: 14px;
  font-size: 10px;
  width: 10em;
  padding: 0 10px 0 0px;
  text-align: center;
}

.closed .num:after {
  border-left-color: #000
}

.closed .num {
  color: #fff;
  background: #000
}

.closed .num.last:after {
  display: none
}

.open .num:after {
  border-left-color: #ccc;
  border-top-color: transparent;
  border-bottom-color: transparent;
  z-index: 1;
}

.open .num:before {
  width: 0;
  height: 0;
  content: " ";
  position: absolute;
  border-top: 15px solid #fff;
  border-bottom: 15px solid #fff;
  border-left: 15px solid #7dba00;
  position: absolute;
  right: -5px;
  top: 0;
  z-index: 0;
}

.open .num {
  background: #ccc;
}

.open .wrap {
  border-radius: 15px 0 0 15px;
  border: 1px solid #7dba00;
}

li.open:after {
  content: " ";
  width: 0;
  height: 0;
  border-top: 16px solid #fff;
  border-bottom: 16px solid #fff;
  border-left: 15px solid #7dba00;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

li.open:before {
  width: 0;
  height: 0;
  content: " ";
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 14px solid #fff;
  position: absolute;
  right: 1px;
  top: 1px;
  z-index: 1;
}

.expanded {
  display: none;
  <!--bbackground-color: red;
  -->padding-right: 900px;
}

.tab {
  <!--background-color: yellow;
  --><!--border: 2px solid black;
  -->border-collapse: collapse;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 12px;
  line-height: 15px;
  text-align: left;
  width: 85%;
  margin-left: 230px;
}

.column {
  float: left;
  width: 25%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

.completed span {
  background-color: NONE;
  color: #95db89;
  border: 2px solid #95db89;
}

.todo span {
  background-color: none;
  color: #E1E6EB;
  border: 2px solid #E1E6EB;
}

.list span {
  color: #58D68D;
  font-weight: 500;
  font-size: 12px;
}

.breadcrumb-pagination div p {
  text-align: center;
  line-height: 0;
  margin: 30px auto 25px;
}

.active p {
  border-bottom: 2px solid #00abc9;
  padding-bottom: 27px;
  margin-bottom: 0px !important;
  color: #3c4043;
  font-weight: 700;
}

.completed p {
  color: #bsb7c1;
}

.list p {
  color: #3c4043;
  font-weight: 700;
}

.completed span::before {
  content: '\2713'
}

.title {
  text-align: center;
  text-decoration: none;
  margin-left: 365px;
  color: #444;
}

table {
  border-collapse: collapse;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 15px;
  line-height: 15px;
  text-align: left;
  width: 98%;
}

th {
  background: linear-gradient(#000000, #4d4d4d);
  border-left: 1px solid #555;
  border-right: 1px solid #777;
  border-top: 1px solid #555;
  border-bottom: 1px solid #333;
  box-shadow: inset 0 1px 0 #999;
  color: #fff;
  font-weight: bold;
  padding: 10px 15px;
  position: relative;
  text-shadow: 0 1px 0 #000;
}

th:after {
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .08));
  content: '';
  display: block;
  height: 15%;
  left: 0;
  margin: 1px 0 0 0;
  position: absolute;
  top: 25%;
  width: 100%;
}

th:first-child {
  border-left: 1px solid #777;
  box-shadow: inset 1px 1px 0 #999;
}

th:last-child {
  box-shadow: inset -1px 1px 0 #999;
}

td {
  border-right: 1px solid #fff;
  border-left: 1px solid #e8e8e8;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 8px;
  position: relative;
  transition: all 300ms;
}

td:first-child {
  box-shadow: inset 1px 0 0 #fff;
}

td:last-child {
  border-right: 1px solid #e8e8e8;
  box-shadow: inset -1px 0 0 #fff;
}

tr {
  background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
}

tr:nth-child(odd) td {
  background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
}

tr:last-of-type td {
  box-shadow: inset 0 -1px 0 #fff;
}

tr:last-of-type td:first-child {
  box-shadow: inset 1px -1px 0 #fff;
}

tr:last-of-type td:last-child {
  box-shadow: inset -1px -1px 0 #fff;
}

h1 {
  color: #444;
  text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, 1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 7px 6px 1px #ccc;
}

a:hover,
a:focus {
  outline: none;
  text-decoration: none;
}

.tab {
  text-align: center;
}

.tab .nav-tabs {
  display: inline-block;
  position: relative;
  border-bottom: none;
}

.tab .nav-tabs li {
  margin: 0;
}

.tab .nav-tabs li a {
  display: block;
  padding: 80px 25px 0 25px;
  background: #fff;
  font-size: 17px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  text-align: center;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid #fff;
  margin-right: 0;
  overflow: hidden;
  z-index: 1;
  position: relative;
  transition: all 0.3s ease 0s;
}

.tab .nav-tabs li a span {
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #f2f2f2;
  margin: auto;
  font-size: 22px;
  color: #999;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  transform: rotate(45deg);
}

.tab .nav-tabs li.active a span {
  background: #29335c;
  color: #fff;
}

.tab .nav-tabs li a span i {
  transform: rotate(-45deg);
}

.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover {
  color: black;
  border: none;
  border-bottom: 2px solid #fff;
}

.tab .nav-tabs li.active a {
  border-bottom: 2px solid #29335c;
}

.tab .tab-content {
  padding: 30px 0 0 19px;
  margin-top: -5px;
  font-size: 15px;
  color: black;
  line-height: 26px;
  text-align: left;
  border-top: 1px solid #e5e5e5;
  width: 600px;
}

.tab .tab-content .tab-pane #Section3_table {
  margin-left: -8px;
}

.tab .tab-content h3 {
  font-size: 24px;
  margin-top: 0;
}

@media only screen and (max-width: 479px) {
  .tab .nav-tabs li {
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
  }
  .tab .nav-tabs li:last-child {
    margin-bottom: 0;
  }
}

<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <title> Order Tracking System </title>
  <center>
    <h1> ORDER TRACKING SYSTEM </h1>
    <br>
    <table class="bts_table">
      <tr>
        <th>ORDER NUMBER</th>
        <th>CUSTOMER NAME</th>
        <th>LOCATION</th>
      </tr>

      <form action="save.php" method="POST">
        <td valign="top"><span class="closedArrow"> 12345 </span></td>
        <td valign="top"><span class="closedArrow"> JOHN </span></td>
        <td valign="top" class="collapsed">
          <ol class="steps">
            <li>
              <div class="num green"><b>1</b></div>
            </li>
            <li>
              <div class="num green"><b>2</b></div>
            </li>
            <li>
              <div class="num green"><b>3</b></div>
            </li>
            <li>
              <div class="num green"><b>4</b></div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num grey"><b>5</b></div>
                <p><span>SHIPPING</span><span>IN PROGRESS</span></p>
              </div>
            </li>
            <li class="closed">
              <div class="num"><b>6</b></div>
            </li>
            <li class="closed">
              <div class="num"><b>7</b></div>
            </li>
            <li class="closed">
              <div class="num"><b>8</b></div>
            </li>
            <li class="closed">
              <div class="num"><b>9</b></div>
            </li>
            <li class="closed">
              <div class="num last"><b>10</b></div>
            </li>

          </ol>
        </td>
        <td colspan="2" class="expanded">
          <ol class="steps">
            <li class="open">
              <div class="wrap">
                <div class="num green"><b>1</b></div>
                <p><span>ORDER</span><span>Done: 03/18/2019</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num green"><b>2</b></div>
                <p><span>PACKING</span><span>Done: 03/18/2019</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num green"><b>3</b></div>
                <p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num green"><b>4</b></div>
                <p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num grey"><b>5</b></div>
                <p><span>SHIPPING</span><span>ONGOING</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num black"><b>6</b></div>
                <p><span>COURIER</span><span>NOT YET DONE </span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num black"><b>7</b></div>
                <p><span>DELIVERY</span><span>NOT YET DONE </span></p>
              </div>

              <li class="open">
                <div class="wrap">
                  <div class="num black last"><b>10</b></div>
                  <p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
                </div>
              </li>
          </ol>
          <hr>
          <div class="tableDiv">
            <div class="container">
              <div class="row">
                <div class="col-md-6">
                  <div class="tab" role="tabpanel">
                    <center>
                      <ul class="nav nav-tabs" role="tablist" style="width: 800px">
                        <li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
                        <li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
                        <li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
                        <li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
                      </ul>


                      <div class="tab-content tabs">
                        <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                          <table border="2px">
                            <tr>
                              <th>ITEM</th>
                              <th>DETAILS</th>
                            </tr>
                            <tr>
                              <td>Bag</td>
                              <td>1pc; Green</td>
                            </tr>
                            <tr>
                              <td>Pouch</td>
                              <td>1pc; Blue</td>
                            </tr>
                            <tr>
                              <td>Necklace</td>
                              <td>1pc; Heart shape; Gold</td>
                            </tr>
                            <tr>
                              <td>Shoes</td>
                              <td>1 pair; Red; Size 6</td>
                            </tr>
                          </table><br>
                          <hr>
                        </div>


                        <div role="tabpanel" class="tab-pane fade" id="Section2">
                          <table border="2px">
                            <tr>
                              <th>CUSTOMER</th>
                              </th>
                              <th>DETAILS</th>
                            </tr>
                            <tr>
                              <td>NAME</td>
                              <td>John Smith</td>
                            </tr>
                            <tr>
                              <td>SHIPPING ADDRESS</td>
                              <td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td>
                            </tr>
                            <tr>
                              <td>TELEPHONE NUMBER</td>
                              <td>754-3010</td>
                            </tr>
                          </table>
                        </div>


                        <div role="tabpanel" class="tab-pane fade" id="Section3">
                          <center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
                            <table id="Section3_table" name="Section3">
                              <tr>
                                <th>ISSUE</th>
                                <th>DETAILS</th>
                              </tr>
                              <tr>
                                <td></td>
                                <td></td>
                              </tr>
                          </center>
                          </table><br>
                          <hr>
                        </div>


                        <div role="tabpanel" class="tab-pane fade" id="Section4">
                          <table border="2px">
                            <tr>
                              <th>COURIER NAME</th>
                              <th>DATE SHIPPED</th>
                              <th>DATE ARRIVED</th>
                            </tr>
                            <tr>
                              <td></td>
                              <td></td>
                              <td></td>
                            </tr>
                          </table><br>
                          <hr>
                        </div>
                      </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <tr>
            <td valign="top"><span class="closedArrow"> 67890 </span></td>
            <td valign="top"><span class="closedArrow"> JANE </span></td>
            <td valign="top" class="collapsed">
              <ol class="steps">
                <li class="open">
                  <div class="wrap">
                    <div class="num grey"><b>1</b></div>
                    <p><span>PACKING</span><span>IN PROGRESS</span></p>
                  </div>
                </li>
                <li class="closed">
                  <div class="num"><b>2</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>3</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>4</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>5</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>6</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>7</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>8</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>9</b></div>
                </li>
                <li class="closed">
                  <div class="num last"><b>10</b></div>
                </li>

              </ol>
            </td>
            <td colspan="2" class="expanded">
              <ol class="steps">
                <li class="open">
                  <div class="wrap">
                    <div class="num green"><b>1</b></div>
                    <p><span>ORDER</span><span>ONGOING</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>2</b></div>
                    <p><span>PACKING</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>3</b></div>
                    <p><span>CHECKING</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>4</b></div>
                    <p><span>RECHECKING</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>5</b></div>
                    <p><span>SHIPPING</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>6</b></div>
                    <p><span>COURIER</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>7</b></div>
                    <p><span>DELIVERY</span><span>NOT YET DONE</span></p>
                  </div>

                  <li class="open">
                    <div class="wrap">
                      <div class="num black last"><b>10</b></div>
                      <p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
                    </div>
                  </li>
              </ol>
              <hr>


              <div class="tableDiv">

                <div class="container">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="tab" role="tabpanel">
                        <center>
                          <ul class="nav nav-tabs" role="tablist" style="width: 800px">
                            <li role="presentation" class="active"><a href="#Section5" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
                            <li role="presentation"><a href="#Section6" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
                            <li role="presentation"><a href="#Section7" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
                            <li role="presentation"><a href="#Section8" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
                          </ul>


                          <div class="tab-content tabs">
                            <div role="tabpanel" class="tab-pane fade in active" id="Section5">
                              <table border="2px">
                                <tr>
                                  <th>ITEM</th>
                                  <th>DETAILS</th>
                                </tr>
                                <tr>
                                  <td>Dress</td>
                                  <td>1pc; Yellow</td>
                                </tr>
                                <tr>
                                  <td>Hat</td>
                                  <td>1pc; Green</td>
                                </tr>
                              </table><br>
                              <hr>
                            </div>


                            <div role="tabpanel" class="tab-pane fade" id="Section6">
                              <table border="2px">
                                <tr>
                                  <th>CUSTOMER</th>
                                  </th>
                                  <th>DETAILS</th>
                                </tr>
                                <tr>
                                  <td>NAME</td>
                                  <td>Jane Doe</td>
                                </tr>
                                <tr>
                                  <td>SHIPPING ADDRESS</td>
                                  <td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td>
                                </tr>
                                <tr>
                                  <td>TELEPHONE NUMBER</td>
                                  <td>1-541-754-3010</td>
                                </tr>
                              </table>
                            </div>


                            <div role="tabpanel" class="tab-pane fade" id="Section7">
                              <center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
                                <table id="Section3_table" name="Section3">
                                  <tr>
                                    <th>ISSUE</th>
                                    <th>DETAILS</th>
                                  </tr>
                                  <tr>
                                    <td></td>
                                    <td></td>
                                  </tr>
                              </center>
                              </table><br>
                              <hr>
                            </div>


                            <div role="tabpanel" class="tab-pane fade" id="Section8">
                              <table border="2px">
                                <tr>
                                  <th>COURIER NAME</th>
                                  <th>DATE SHIPPED</th>
                                  <th>DATE ARRIVED</th>
                                </tr>
                                <tr>
                                  <td></td>
                                  <td></td>
                                  <td></td>
                                </tr>
                              </table><br>
                              <hr>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
    </table>
</body>

</html>

关于javascript - 使用选项卡正确显示表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55368435/

文章推荐： html - 需要多个 <meta> 标签还是我只需要一个？

文章推荐： html - 在 DIV 与 TD 内部时的 offsetWidth 不同

文章推荐： c++ - C++计算文件中某个单词出现的次数

android - 如何在 KitKat 中将文件写入可移动 SD 卡(不是外部 SD 卡)？
在 Android 的 API > 19 中是否有任何方法可以获取可移动 SD 卡的路径？与外部 SD 卡一样，我们有 Environment.getExternalStorageDirectory
Android API 19 及更高版本。写入 microSD 卡(外置 SD 卡)
一些 Android 设备有 microSD(或其他存储卡)插槽，通常安装为 /storage/sdcard1 据我所知，自 Android 4.4 起 Google 限制了对此内存的访问，并在 An
Java 卡检测到与智能卡的通信错误
我使用 Java Card 2.1.2 SDK 和 GPShell 作为与设备通信的方式在 Java Card 上构建一个项目。我从 GpShell 测试了 helloworld 示例，并成功发送了
安卓广播接收器和双 SIM 卡
我开发了一个应用程序，它有一个来电接收器，它适用于所有手机。一位用户有一部双 SIM 卡安卓手机。该应用程序适用于第一张 SIM 卡。但是当有人调用他的第二张 SIM 卡时，我们的应用程序不会被调用。
具有固定高度和响应图像的 CSS 卡
我有一个带预览的文件输入。这是笔 Codepen 我想强制高度，我无法理解我该怎么做。我想将此组件的高度固定为 300px(示例)，我还需要保持加载图像的正确纵横比，用灰色背景填充空白。现在我保持宽
gsm - 提供商如何检测到重复的 SIM 卡？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。想改进这个问题？将问题更新为 on-topic对于堆栈溢出。 6年前关闭。 Improve this qu
kivy - 访问可移动 SD 卡
我正在使用此代码访问 SD card : import os from os.path import join from jnius import autoclass #from android.pe
io - 通过无竞争条件的缓冲区将数据写入 SD 卡
我正在为数据记录设备编写固件。它以 20 Hz 的频率从传感器读取数据并将数据写入 SD 卡。但是，向SD卡写入数据的时间并不一致(大约200-300 ms)。因此，一种解决方案是以一致的速率将数据写
html - Bootstrap ，卡+视频不适合手机屏幕
我正在使用以下代码将视频放到网站上，但是在垂直方向上，手机屏幕上只能看到视频的左半部分我不是网络开发人员。有人可以告诉我确切的内容吗，如何使其正确放置在手机屏幕上？是在youtube iframe
javascript - 在单行而不是列中显示 Vuetify 卡？
我正在使用 Vuetify 1.5 和 Vuetify 网格系统来设置我的布局。现在我有一个组件 HelloWorld我将其导入到我的 Parent 中成分。我已经在我的 HelloWorld 中设置
python - 如何并排打印我的 ASCII 卡？
我使用 python 制作了一个简单的二十一点游戏。我制作了游戏的其余部分，但我正在努力放入 ASCII 卡，所以这只是代码的一小部分。我尝试将 * len(phand) 放在附加行的末尾。虽然这确实
twitter - 如何测试 Twitter 卡？
我正在使用玩家卡设置 Twitter 卡。它可以在预览工具中运行，但文档说它需要在“twitter.com 现代桌面浏览器？ native iOs 和 Android Twitter 应用程序？mob
gsm - 如何以编程方式访问 SIM 卡？
任何旧的 GSM 兼容 SIM 卡(3G USIM 的奖励)。我想我需要一些硬件？谁能为业余爱好者推荐一些便宜的东西，以及一些更专业的东西？我认为会有一个带有硬件的 API 的完整文档，所以也许这
python - 如何并排打印我的 ASCII 卡？
我使用 python 制作了一个简单的二十一点游戏。我制作了游戏的其余部分，但我正在努力放入 ASCII 卡，所以这只是代码的一小部分。我尝试将 * len(phand) 放在附加行的末尾。虽然这确实
process - 用于并行计算的 CPU 卡？
我记得前一段时间读到有 cpu 卡供系统添加额外的处理能力来进行大规模并行化。任何人都有这方面的经验和任何资源来研究项目的硬件和软件方面吗？这项技术是否不如传统集群？它更注重功率吗？最佳答案有两个
java - 外部存储并不指大容量内部 SD 卡
我检查外部存储是否已安装并且可用于读/写，然后从中读取。我使用的是确切的官方 Android 示例代码 ( from here )。它说外部存储未安装。 getExternalFilesDir(nu
Android 应用程序下载到 SD 卡
在 Android 2.1 及更低版本中，Android 应用程序可以请求下载到 SD 卡上吗？另外我想知道应用程序是否可以请求一些包含视频的文件夹下载到 SD 卡上？以及如何做到这一点？提前致谢。
c++ - 驱动程序拒绝访问 PCI 卡
我们编写了一个 Windows 设备驱动程序来访问我们的自定义 PCI 卡。驱动程序使用 CreateFile 获取卡的句柄。我们最近在一次安装中遇到了问题，卡似乎停止工作了。我们尝试更换卡(更换似
Android:查找设备是否具有双 SD 卡
有些新设备(例如 Samsung Galaxy)带有两个 SD 卡。我想知道是否有任何方法可以确定设备是否有两张 SD 卡或一张 SD 卡。谢谢最佳答案我认为唯一的方法是使用检查可用根的列表 F
android - 无法访问 SD 卡
我正在尝试将文件读/写到 SD 卡。我已经尝试在我的真实手机和 Eclipse 中的模拟器上执行此操作。在这两种设备上，对/mnt/sdcard/或/sdcard 的权限仅为“d--------”，我

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用选项卡正确显示表格