Question

您好我想在ebay上显示我的页面。我有正确使用javascript的标签，但ebay不支持javascript，我想通过CSS来做到这一点。

 <ul class="infotabs">
   <li><a href="" id="tab1" style="background-color:#000">Payment</a></li>
   <li><a href="" id="tab2">Shipping</a></li>
   <li><a href="" id="tab3">Return policy</a></li>
</ul>


 ///////////////////my multiple div//////////////////////

 <div class="contentwraper" id="newboxes1" name="newboxes">
     <h2>Payment</h2>
 </div>
 <div class="contentwraper" id="newboxes2" name="newboxes">
     <h2>Shipment</h2>
 </div>
 <div class="contentwraper" id="newboxes3" name="newboxes">
     <h2>Policy</h2>
 </div>

如何通过CSS提供帮助

Answer 1

你可以这样，而且它不需要任何javascript 首先看this jsFiddle demo 并考虑这个例子：

<a href="#div1">Div one</a>
<a href="#div2">Div two</a>
<a href="#div3">Div three</a>
<a href="#div4">Div four</a>

<div id="content">
    <div id="div1">This is div one</div>
    <div id="div2">This is div two</div>
    <div id="div3">This is div three</div>
    <div id="div4">This is div four</div>
</div>

和你的css

#content > div {
    display: none;
}

#content > div:target {
    display: block;
}

在HTML中，包装div（#content）不是必需的，它只是为了更容易专门定位它包含的元素（当然，你可以简单地使用一个类）

要添加隐藏功能（隐藏全部，而不是仅仅在显示另一个时隐藏兄弟div），遗憾的是需要一个链接来触发哈希更改（以便停止：匹配div的目标选择器），这在转向需要一个链接（在每个div中显示或在文档中的其他地方，或者链接elswhere

Answer 2

我不是CSS人，所以我会保持这一点，并指出其他人在这方面做得更好：

简而言之，这个想法是，例如，检查checkbox元素的状态，而不是应用相应的样式

<强> http://tympanus.net/codrops/2012/12/17/css-click-events/

<强> CSS

.to-be-changed {
   color: black;
 }   

input[type=checkbox]:checked ~ .to-be-changed {
  color: red;
}

<强>标记

<input type="checkbox">
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>

我想通过CSS为ebay产品列表页面显示和隐藏div数据

2 个答案: