保持选项卡处于活动状态，并默认打开选项卡 [英] Keep tab active state, and open tab by default

问题描述

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

I've made a jsfiddle of my rough setup here:

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

a）我的问题是我的标签工作得很好，一旦点击，它就保持活动的紫色状态。我尝试了一些解决方案没有效果。

a) My issue is I have tabs working fairly well, but it won't keep the active purple state once its clicked. I've tried a few solutions to no avail.

b）此外，我不知道如何在默认情况下打开项目1选项卡，当您加载页面。

b) Additionally, I cant figure out how to have "item 1" tab open by default when you load the page.

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

I would like to avoid javascript if possible. Any thoughts would be great.

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>

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;
}

最后一个问题，如果有人感到宽厚：

A final question if anyone is feeling generous:

c）目前我不能将div或任何内容放在here下面：

c) At the moment I can't put div's or anything inside the "here" below:

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

它只是喜欢文本，

推荐答案

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

a) you can add an class="active" to the current active tab, to keep the color

b）您可以使用相同的活动

b) you can use this same active class to show a tab by default.

c）您不能嵌套< div> < p> 下，但没有理由不能让您< p class =tabcontent> into < div class =tabcontent> 。

c) you can't nest <div> under a <p>, but there's no reason you can't make your <p class="tabcontent"> into <div class="tabcontent">.

： https://jsfiddle.net/9h5eqsuy/2/

这篇关于保持选项卡处于活动状态，并默认打开选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！