保持选项卡活动状态，并默认打开选项卡

Question

保持选项卡活动状态，并默认打开选项卡

jqueryhtmlcsstabs

4

我已经在这里建立了一个我的初步设置的jsfiddle：

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) 目前我无法在下面的“here”中放置div或其他内容：

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

它似乎只喜欢文本，而对我粘贴的任何内容都会截断。有没有简单的方法来解决这个问题？

- jnapier

3个回答

3

a) 你可以给当前激活的选项卡添加一个class="active"，以保持颜色。

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

c) 你不能在<p>下嵌套<div>，但是你可以将<p class="tabcontent">更改为<div class="tabcontent">，没有任何问题。

我已经更新了代码片段：https://jsfiddle.net/9h5eqsuy/2/

- Alan Files

你打算如何在没有使用Javascript（或jQuery）的情况下添加active类？这就是OP想要的，我实际上非常好奇是否可能 :D - Rvervuurt

哦！你可以通过在按钮和选项卡上使用相同的类，并使用CSS来针对类名更改按钮的背景，来实现这个功能。我会尝试模拟一下看看。 - Alan Files

1

因此，我认为没有使用JavaScript实现选项卡功能的最接近方法是使用单选按钮。我尝试过像这样组合一些内容，但它非常有缺陷。https://jsfiddle.net/9h5eqsuy/7/点击文本将更改按钮/高亮显示的内容，但单击框将激活锚链接...有缺陷。 - Alan Files

0

它接近了但还没有完全到达（顺便说一下，我可能会选择 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>

- Jon P

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GreyRoofPigeon · Accepted Answer

既然您在问题中标记了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();
    });
});

更新的Fiddle

对于问题c：使用div代替段落...