Question

我遇到了问题。我有一个纯CSS标签容器。但是当我点击标签时，它应该以某种方式变为活动状态。

我已经使用<input type="radio" />和<label for="foo">进行了尝试但是锚<a href="#tabX"></a>不再起作用了。

有什么想法吗？

JSFIDDLE

Answer 1

由于您已经使用了散列#，因此您可以使用伪类:target。

为了说明这是如何运作的，我添加了额外的span，以便能够定位锚a和div。

使这项工作的三个主要因素是span，:target ~ ...和#tab1:target ~ ...规则。

放置span之前我们可以使用兄弟选择器以1个哈希为目标定位1个或多个元素。
使用:target ~ ...规则，我们会在存在哈希时重置initilly显示选项卡及其内容
最后，我们使用每个#tab1:target ~ ...规则来标记所选标签并显示其内容

另见CSS中的注释，它解释了所使用的步骤。

＆＃13;

ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: inline-block;
}
ul li {
  list-style: none;
  float: left;
}
ul li a {
  color: #FFF;
  background: #333;
  display: block;
  padding: 10px;
  text-decoration: none;
}
.hideme {
  display: none;
}

.tabcontainer {
  width: 100%;
}
.tabcontainer .tab {
  position: absolute;
  display: none;
}

/* set the first link's background and show its div on page load */
ul li:first-child a,
.tab:first-child {
  background: #638DB2;
  display: block;
}

/* reset the first link's background and hide its div when a hash tag exist */
:target ~ ul [href="#tab1"] {
  background: black;
}
:target ~ .tabcontainer #tab1div {
  display: none;
}

/* set the hashed/targeted link's background and show its div */
#tab1:target ~ ul [href="#tab1"],
#tab1:target ~ .tabcontainer #tab1div {
  background: #638DB2;
  display: block;
}
#tab2:target ~ ul [href="#tab2"],
#tab2:target ~ .tabcontainer #tab2div {
  background: #FF4C43;
  display: block;
}
#tab3:target ~ ul [href="#tab3"],
#tab3:target ~ .tabcontainer #tab3div {
  background: #C1CC14;
  display: block;
}
#tab4:target ~ ul [href="#tab4"],
#tab4:target ~ .tabcontainer #tab4div {
  background: #ADB257;
  display: block;
}

＆＃13;

<span id="tab1" class="hideme"></span>
<span id="tab2" class="hideme"></span>
<span id="tab3" class="hideme"></span>
<span id="tab4" class="hideme"></span>
<ul>
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
  <li><a href="#tab4">Tab 4</a></li>
</ul>
<div class="tabcontainer">
  <div id="tab1div" class="tab">
    1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab2div" class="tab">
    2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab3div" class="tab">
    3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab4div" class="tab">
    4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

＆＃13;

Answer 2

对于那些想要脚本版本的人，我只是将源代码编辑为片段并添加了一些jQuery函数。

$(document).ready(function(){
  var currentTab = $("#buttonTab1")
  
  $("#buttonTab1").click(function(){
    currentTab.removeClass();
    currentTab = $(this);
  	$(this).addClass("tab1")
  });
  
	$("#buttonTab2").click(function(){
    currentTab.removeClass();
    currentTab = $(this);
  	$(this).addClass("tab2")
  });
  
  $("#buttonTab3").click(function(){
    currentTab.removeClass();
    currentTab = $(this);
  	$(this).addClass("tab3")
  });
  
  $("#buttonTab4").click(function(){
    currentTab.removeClass();
    currentTab = $(this);
  	$(this).addClass("tab4")
  });

});

ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: inline-block;  
}
ul li {
  list-style: none;
  float: left;
  background: #333;    
}
ul li a {
   color: #FFF;
   display: block;
   padding: 10px;
   text-decoration: none;
}
.tabcontainer {
  width: 100%;  
}
.tab:not(:first-child) {
  display: none;
}
.tab {
  position: absolute;  
}  
.tab:target {
  display: block;
}
.tab1 {
  background: #638DB2;
}
.tab2 {
  background: #FF4C43;
}
.tab3 {
  background: #C1CC14;
}
.tab4 {
  background: #ADB257;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a id="buttonTab1" class = "tab1" href="#tab1">Tab 1</a></li>
  <li><a id="buttonTab2" href="#tab2">Tab 2</a></li>
  <li><a id="buttonTab3" href="#tab3">Tab 3</a></li>
  <li><a id="buttonTab4" href="#tab4">Tab 4</a></li>
</ul>
<div class="tabcontainer">
  <div id="tab1" class="tab tab1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab2" class="tab tab2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab3" class="tab tab3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab4" class="tab tab4">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

纯CSS选项卡容器活动选项卡

2 个答案: