保持标签页活跃状态，默认打开标签页 [英] 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>
</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;
}

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

A final question if anyone is feeling generous:

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

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

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

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

It only seems to like text, and butchers anything I paste into it. Is their any easy way to remedy this?

推荐答案

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

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

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

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

c) 你不能将 <div> 嵌套在 <p> 下，但没有理由不能让你的 <p class="tabcontent"> 转换成 <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屋！