默认情况下使CSS选项卡处于打开状态

时间:2018-08-05 22:58:04

标签: html css

因此,我试图重新设计我们的产品说明在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>
                  &nbsp
                  <p>
                    <p>
                      &nbsp
                      <p>
                        <p>
                          &nbsp
                          <p>
                            <p>
                              &nbsp
                              <p>
                                <p>
                                  &nbsp
                                  <p>
                                    <p>
                                      &nbsp
                                      <p>
                                        <p>
                                          &nbsp
                                          <p>
                                            <p>
                                              &nbsp
                                              <p>
                                                <p>
                                                  &nbsp
                                                  <p>
                                                    <p>
                                                      &nbsp
                                                      <p>
                                                        <p>
                                                          &nbsp
                                                          <p>
                                                            <p>
                                                              &nbsp
                                                              <p>
                                                                <p>
                                                                  &nbsp
                                                                  <p>
                                                                    <p>
                                                                      <p>
                                                                        &nbsp
                                                                        <p>
                                                                          <p>
                                                                            &nbsp
                                                                            <p>
                                                                              <p>
                                                                                &nbsp
                                                                                <p>
                                                                                  <p>
                                                                                    &nbsp
                                                                                    <p>
                                                                                      &nbsp
                                                                                      <p>
                                                                                        <p>
                                                                                          &nbsp
                                                                                          <p>
                                                                                            <p>
                                                                                              &nbsp

                                                                                            </p>
          </td>
        </tr>
      </tbody>
    </table>
    <p>&nbsp;</p>







</body>

</html>

2 个答案:

答案 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