Question

由于2017年6月新的eBay规则生效，所有商家信息都不允许使用有效内容。

我使用html和CSS创建了一个标签菜单。我需要使用非活动且优选响应的CSS和HTML来突出显示所选选项卡。

通常我会使用J.S来更改CSS可以操作的活动ID。

到目前为止我所拥有的：

#menb {
  cursor: pointer;
  width: 150px;
  display: inline-block;
  background-color: #BC2400;
  color: white;
  font-weight:bold;  
  text-align: center;
  transition: .25s ease;
  border: none;
  padding: 10px;
  border-radius: 12px 12px 0 0;
}

#menu_area a {
    color: #ffffff;
    text-decoration: none;      
}    

#menu_area a:hover {
    color: #ffbf01;
    text-decoration: none;       
}

#menu_area a:active {
    text-decoration: none;    
    color: #ffbf01;
}      
      
.tab-folder > .tab-content:target ~ .tab-content:last-child, .tab-folder > .tab-content {
    display: none;
}
.tab-folder > :last-child, .tab-folder > .tab-content:target {
    display: block;
}

#postage {
    font-family:verdana, arial, sans-serif;
    text-align:center;
    text-justify: distribute;
    color:red;
    font-size:12px;
}

#button {
    display: inline;
    text-decoration: none;    
    border: 1px solid #B7B7B7; 
    background: #F7F7F7 url(http://www.electrohero.com/ebay/images/tabbut.gif) repeat-x 0 0;    
    background-color:#FFF;
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px;
    width: 130px;
    font-weight:bold;
    color: #f5f5f5;
    /*margin: 0 auto;*/  
    margin-right:8px; /*distance between buttons*/    
    padding: 4px 4px 4px 4px; 
    font-family: Verdana,Arial,Helvetica,sans-serif;     
    font-size: 12px;
    text-align: center;       
}

#button a:link a:visited a:hover {
    text-decoration: none;
    color: #f5f5f5; 
    font-weight:bold;       
}

<!DOCTYPE html>
<html>
<head>  
  <link href="simple.css" rel="stylesheet" type="text/css" /> 
</head>
  
<body style="margin:0px">  

  <p>Some text....</p>   
    
  <br /><br /> 
                                                
  <div id="menu_area">
      <button id="menb"><a href="#tab1">Menu 1</a></button>
      <button id="menb"><a href="#tab2">Menu 2</a></button>
      <button id="menb"><a href="#tab3">Menu 3</a></button>
      <button id="menb"><a href="#tab4">Menu 4</a></button>
  </div>      
  <div class="tab-folder">
    <div id="tab2" class="tab-content">
    <p>Menu 2</p>
    </div>                             

    <div id="tab3" class="tab-content">
    <p>Menu 3</p>
    </div>  <!-- end view3 -->    

    <div id="tab4" class="tab-content"> <!-- tab - What's sent -->                         
    <p>Menu 4</p>
    </div>  <!-- end tab 4 -->    

    <div id="tab1" class="tab-content"> <!-- tab - Compatible Devices -->                                 
    <p>Menu 1</p>                                                                                       
    </div> <!-- end view1 --> 
  </div>   <!-- end tab-folder -->
    
  </body> 
</html>

Answer 1

当我找到你的时候，你需要在没有JavaScript的情况下跟踪活动状态？这确实可以通过滥用单选按钮来实现。请查看以下代码。

基本上，我稍微改变了结构，并为每个标签引入了带有for属性和<input type="radio" ... />的标签。共享相同名称的单选按钮一次仅限于一个活动按钮。标签具有每个单选按钮（tab1_active等）的ID作为for属性，该属性在单击时激活输入。有两件事很重要：我必须删除<a>，因为只能点击标签或a（这会导致突出显示正确的按钮或激活正确的部分）。其次，单选按钮必须与菜单和选项卡容器处于同一级别，以允许正确的css选择器使用。其余的是选择器黑客攻击，如input#tab1_active:checked ~ #menu_area .tab1-btn（读取：对于带有id tab1_active的输入，检查查找id为menu_area的前面元素，并选择每个具有tab1-btn类的子...）。 p>

.button {
  cursor: pointer;
  box-sizing: border-box;
  padding-top: 10px;
  width: 150px;
  display: inline-block;
  background-color: #BC2400;
  color: white;
  font-weight:bold;  
  text-align: center;
  transition: .25s ease;
  border: none;
  border-radius: 12px 12px 0 0;
}

#menu_area .button {
    color: #ffffff;
    text-decoration: none;   
    height: 45px;
}    

#menu_area .button:hover {
    color: #ffbf01;
    text-decoration: none;       
}

#menu_area .button:active {
    text-decoration: none;    
    color: #ffbf01;
}          

#postage {
    font-family:verdana, arial, sans-serif;
    text-align:center;
    text-justify: distribute;
    color:red;
    font-size:12px;
}

#button {
    display: inline-block;
    text-decoration: none;    
    border: 1px solid #B7B7B7; 
    background: #F7F7F7 url(http://www.electrohero.com/ebay/images/tabbut.gif) repeat-x 0 0;    
    background-color:#FFF;
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px;
    width: 130px;
    font-weight:bold;
    color: #f5f5f5;
    /*margin: 0 auto;*/  
    margin-right:8px; /*distance between buttons*/    
    font-family: Verdana,Arial,Helvetica,sans-serif;     
    font-size: 12px;
    text-align: center;     
    padding: 4px;
}

label {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 10px;
  cursor: pointer;
  width: 120px;
}

input[type="radio"] {
  display: none;
}

.tab-folder .tab-content {
  display: none;
}

input#tab1_active:checked ~ #menu_area .tab1-btn {
  color: #ffbf01!important;
}

input#tab1_active:checked ~ .tab-folder #tab1 {
  display: block;
}

input#tab2_active:checked ~ #menu_area .tab2-btn {
  color: #ffbf01!important;
}

input#tab2_active:checked ~ .tab-folder #tab2 {
  display: block;
}

input#tab3_active:checked ~ #menu_area .tab3-btn {
  color: #ffbf01!important;
}

input#tab3_active:checked ~ .tab-folder #tab3 {
  display: block;
}

input#tab4_active:checked ~ #menu_area .tab4-btn {
  color: #ffbf01!important;
}

input#tab4_active:checked ~ .tab-folder #tab4 {
  display: block;
}

<!DOCTYPE html>
<html>
<head>  
  <link href="simple.css" rel="stylesheet" type="text/css" /> 
</head>
  
<body style="margin:0px">  

  <p>Some text....</p>   
    
  <br /><br /> 
  
  <input type="radio" name="active-menu" id="tab1_active" checked>
  <input type="radio" name="active-menu" id="tab2_active">
  <input type="radio" name="active-menu" id="tab3_active">
  <input type="radio" name="active-menu" id="tab4_active">
 
  <div id="menu_area">   
      
        <label for="tab1_active">
              <div class="button menb tab1-btn">Menu 1</div>    
        </label> 
      
        <label for="tab2_active">
          <div class="button menb tab2-btn">Menu 2</div>
        </label>
            
        <label for="tab3_active">
          <div class="button menb tab3-btn">Menu 3</div>
        </label>   
        
        <label for="tab4_active">
         <div class="button menb tab4-btn"> Menu 4</div> 
        </label>
               
  </div>      
  <div class="tab-folder">
    <div id="tab2" class="tab-content">
    <p>Menu 2</p>
    </div>                             

    <div id="tab3" class="tab-content">
    <p>Menu 3</p>
    </div>  <!-- end view3 -->    

    <div id="tab4" class="tab-content"> <!-- tab - What's sent -->                         
    <p>Menu 4</p>
    </div>  <!-- end tab 4 -->    

    <div id="tab1" class="tab-content"> <!-- tab - Compatible Devices -->                                 
    <p>Menu 1</p>                                                                                       
    </div> <!-- end view1 --> 
  </div>   <!-- end tab-folder -->
    
  </body> 
</html>

使用CSS

1 个答案: