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

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首先看看这个jsFiddle演示考虑这个例子:

<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)，不幸的是需要一个链接来触发散列更改(为了停止:target选择器匹配div)，这又需要一个链接(要么在每个要显示的div中，要么在文档的其他地方，要么链接到其他地方

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>