因此,我试图重新设计我们的产品说明在eBay上的外观,但是在弄清楚如何使第一个标签页自动打开时遇到了麻烦。现在,如何设置,您必须单击“产品描述”(选项卡)以显示其内容。我似乎无法弄清楚要自动打开它必须添加的位置或内容。
任何人都可以提供帮助吗?
谢谢!
<style type="text/css">.css-tabs {
position: relative;
text-align: center;
/* This is only if you want the tab items at the center */
}
.css-tabs ul.menu {
list-style-type: none;
display: inline-block;
/* Change this to block or inline for non-center alignment */
}
.css-tabs ul.menu>li {
display: block;
float: left;
}
.css-tabs ul.menu li>a {
color: #000;
text-decoration: none;
display: absolute;
text-align: center;
border: 1px solid #808080;
padding: 5px 10px 5px 10px;
margin-right: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 5px;
-moz-user-select: none;
cursor: pointer;
}
.css-tabs ul.menu li>div {
display: none;
position: absolute;
width: 100%;
left: 0;
margin: -1px 0 0 0;
z-index: -1;
text-align: left;
padding: 0;
}
.css-tabs ul.menu li>div>p {
border: 0px solid #808080;
padding: 10px;
margin: 0;
}
.css-tabs ul.menu li>a:focus {
border-bottom: 1px solid #fff;
}
.css-tabs ul.menu li:target>a {
cursor: default;
border-bottom: 1px solid #fff;
}
.css-tabs ul.menu li:target>div {
display: block;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Ebay Template</title>
</style>
</head>
<body>
<center>
<p><img src="https://centralvalleycomputerparts.com/product_images/uploaded_images/location.png" width="100%" height="166" /></p>
<table style="height: 651px; width: 100%;" border=0>
<tbody>
<tr style="height: 493px;">
<td style="width: 18.9401%; height: 493px;">
<table style="height: 485px;" width="152">
<tbody>
<tr>
<td style="width: 142px; text-align: right;"><strong>
<font size = 5>
Categories<font></strong></td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">
<hr>All Products
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Add-On Cards
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Accessories
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Cables
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Cisco
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Desktops/Laptops/Servers
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Electronics
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Hard Drives
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Heat Sinks
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Keyboards
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Memory / RAM
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Motherboards
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Power Supplies
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Processors
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Server Components
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">SSDs
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Video Cards
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Other
<hr>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 78.9688%; height: 493px;">
<p>
<!-- it goes here -->
<form method="get" action="http://www.ebay.com/sch/i.html" target="_blank">
<table style="margin:auto; font-family:arial; text-align:left; background:#ddd; border:1px solid #888; border-radius:.25em">
<tbody>
<tr>
<td>
<input type="hidden" name="_ssn" value="central_valley_computer_parts_inc">
<input type="hidden" name="_sop" value="12">
<input type="text" name="_nkw" value="">
<input type="submit" value="Search">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="LH_TitleDesc" value="1">
<small>include description</small>
</td>
</tr>
</tbody>
</table>
</form>
<div id="tab2" class="css-tabs">
<ul class="menu">
<li id="item-1">
<a href="#item-1">
<font face="Helvetica" size=5>Product Description</font>
</a>
<div>
<p>
<!-- ******************************-->
<!-- Product Description goes here -->
<!-- ******************************-->
<center>
<img src="https://cdn8.bigcommerce.com/s-bxaxkh/product_images/uploaded_images/product-description.png?t=1532892462&_ga=2.208211035.830779260.1532892407-1079763816.1532576134">
</center>
<!-- ******************************-->
<!-- Product Description Ends here -->
<!-- ******************************-->
</p>
</div>
</li>
<li id="item-2">
<a href="#item-2">
<font face="Helvetica" size=5>About Us</font>
</a>
<div>
<p>Central Valley Computer Parts, Inc. has been in business since 2010. What started as a home business and hobby 7 years ago has since grown into a full-blown business supporting 10 team members! We operate out of a warehouse in Ripon,
California and strive to provide the best customer service we can. We hope to serve you for many years to come!</p>
</div>
</li>
<li id="item-3">
<a href="#item-3">
<font face="Helvetica" size=5>Return Policy</font>
</a>
<div>
<p>
<!-- ******************************-->
<!-- Start Return Policy -->
<!-- ******************************-->
<img src="https://cdn6.bigcommerce.com/s-bxaxkh/product_images/uploaded_images/terms2-a.jpg?t=1504814802&_ga=2.109104901.102196424.1504814843-1761240196.1503617547">
<!-- ******************************-->
<!-- end return policy -->
<!-- ******************************-->
</p>
</div>
</li>
<li id="item-4" title="click for Tab 4">
<a href="#item-4">
<font face="Helvetica" size=5>Tab 4</font>
</a>
<div>
<p>Tab Content 4</p>
</div>
</li>
</ul>
</div>
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
 
<p>
<p>
 
<p>
<p>
 
</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
</body>
</html>
答案 0 :(得分:0)
您可以使用如下所示的javascript来做到这一点。
location.href=location.href+"#item-1";
http://jsbin.com/hogasozucu/edit?html,output
答案 1 :(得分:0)
当然只有css3才有可能,如下所示
.css-tabs ul.menu li:first-child>a { cursor: default; border-bottom: 1px solid #fff; }
.css-tabs ul.menu li:first-child>div { display: block; }
please try it on jsbin.com/mazazomamu/edit?css,output