保持标签页活跃状态，默认打开标签页

Question

我在这里做了一个粗略的设置：

https://jsfiddle.net/9h5eqsuy/1/

a) 我的问题是我的标签工作得相当好，但是一旦点击它就不会保持活动的紫色状态。我尝试了一些解决方案都无济于事。

b) 此外，我不知道如何在加载页面时默认打开“项目 1”选项卡。

如果可能，我想避免使用 javascript。任何想法都会很棒。

HTML

<p>
  <div class="tabbuttonsdiv">
    <a href="#item1" class="tabbuttons">item 1</a>
    <a href="#item2" class="tabbuttons">item 2</a>
    <a href="#item3" class="tabbuttons">item 3</a>
  </div>

  <div class="items">
    <p id="item1" class="tabcontent">... item 1...
    <p id="item2" class="tabcontent">... item 2...
    <p id="item3" class="tabcontent">...      
  </div>
</p>

CSS

div.items p {
    display: none;
}

div.items p:target {
    display: block;
}

.tabbuttons{
    color: #fff;
    background-color:#3195c1;
    border: none;
    padding: 10px;
}

.tabbuttons:hover {
    background-color:PURPLE;
}
.tabcontent{
    background: #ddd;
    min-height: 100px;
}

最后一个问题是否有人感到慷慨：

c) 目前我不能将 div 或任何内容放在下面的“这里”中：

<p id="item1" class="tabcontent">... "here"... </p>

它似乎只喜欢文本，并且会删除我粘贴到其中的任何内容。他们有什么简单的方法可以解决这个问题吗？

Answer 1

a) 您可以在当前活动标签中添加class="active"，以保持颜色

b) 您可以使用相同的active 类默认显示选项卡。

c) 你不能将<div> 嵌套在<p> 下，但是你没有理由不能将你的<p class="tabcontent"> 放入<div class="tabcontent">。

我已经更新了小提琴：https://jsfiddle.net/9h5eqsuy/2/

Answer 2

由于您在问题中标记了 jQuery，我想出了这个解决方案。

CSS：

div.items p {display: none}
div.items p:first-child {display: block; } /* solution for b. */

.tabbuttons{
    color: #fff;
    background-color:#3195c1;
    border: none;
    padding: 10px;
}

.tabbuttons:hover {
    background-color:PURPLE;
}
.tabcontent{
 background: #ddd;
    min-height: 100px;
}

.activeTab { background-color:PURPLE } /* solution for a. */
.activeItem { display: block; }

jQuery

$(function() {    
    $('.tabbuttons').on('click', function() {
        $('.tabbuttons').removeClass('activeTab'); /* solution for a. */
        $(this).addClass('activeTab'); /* solution for a. */
        var i = $(this).attr('href');
        $('.items p').hide();
        $(i).show();
    });
});

Updated Fiddle

对于问题 c.：使用 div 而不是段落...

Answer 3

它很接近，但不完全在那里（正如我旁注的那样，我可能会选择一个 javascript 选项）

您需要做的是在链接和目标之间创建层次关系。为此，请将链接及其相关目标放入容器中。然后我使用绝对定位将目标定位在stage 容器中。我还保持item1 始终显示，以便在页面加载时显示，但z-index 比其他项目低，因此它们显示在其顶部。

问题在于 itme1 选项卡在页面加载时未突出显示

div.items p {
  display: none
}
div.items p:target {
  display: block
}
#stage {
  position: releative;
}
#stage>div {
  display: inline-block;
}
#stage .item {
  position: absolute;
  z-index: 10;
  display: none;
  left: 8px;
  width: 90%
}
#stage #item1 .item {
  display: block;
  z-index: 1;
}
#stage>div:target .item {
  display: block;
}
.tabbuttons {
  color: #fff;
  background-color: #3195c1;
  border: none;
  padding: 10px;
}
.tabbuttons:hover,
:target .tabbuttons {
  background-color: PURPLE;
}
.tabcontent {
  background: #ddd;
  min-height: 100px;
}

<div id="stage">
  <div id="item1">
    <a href="#item1" class="tabbuttons">item 1</a>
    <div class="item">
      <p class="tabcontent">... item 1...</p>
    </div>
  </div>
  <div id="item2">
    <a href="#item2" class="tabbuttons">item 2</a>
    <div class="item">
      <p class="tabcontent">... item 2...</p>
    </div>
  </div>
  <div id="item3">
    <a href="#item3" class="tabbuttons">item 3</a>
    <div class="item">
      <p id="item3" class="tabcontent">...</p>
    </div>
  </div>
</div>