Getting CSS tab to be open by default
Clash Royale CLAN TAG#URR8PPP
Getting CSS tab to be open by default
So, I'm trying to redesign how our product descriptions look on eBay, but am having trouble figuring out how to get the first tab to be open automatically. With how its setup now, it's you have to click on Product Description (tab) to display its contents. I can't seem to figure out where or what I have to add to have it automatically open.
Can anyone offer any assistance?
Thanks!!
<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>
center
font
tables
2 Answers
2
You can do it with javascript like following.
location.href=location.href+"#item-1";
http://jsbin.com/hogasozucu/edit?html,output
Is there a way do it without JS?
– user2881231
Aug 6 at 1:23
of course it is possible only with css3 like following
.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
this does sort of work, but once you open other tabs it goes over. :D im trying to make modifications to the code now but if you come up with anything to fix that i'd much appreciate it :D
– user2881231
Aug 6 at 2:01
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Please reduce your code to the minimum required to reproduce the problem, please see: Minimal, Complete, and Verifiable example. There is a lot of unnecessary code there. Unrelated to you problem, but worth mentioning, the
centerandfonttags are deprecated and no longer should be used. You should also avoid usingtablesfor markup.– Jon P
Aug 6 at 0:26