保持活跃选项卡状态，打开的选项卡默认

Question

我做了我的粗略设置的的jsfiddle这里：

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

一）我的问题是我有标签的工作还算不错，但它赢得了”一旦点击就保持活动的紫色状态。我尝试了一些解决方案无济于事。

b）另外，我无法弄清楚如何在加载页面时默认打开“item 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; 
} 

最后一个问题，如果有人感觉慷慨：目前，我不能把div的或任何里面的“这里

C） “如下：

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

它似乎只是喜欢文字和屠夫的任何东西我粘贴到它。他们有什么简单的方法来解决这个问题吗？

Answer 1

a）您可以添加一个class="active"到当前的活动标签，以保持颜色

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

c）您不能在<p>下嵌套<div>，但没有理由不能将<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

对于问题Ç.:使用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>