jquery - 保持选项卡处于事件状态，默认打开选项卡

Question

我在这里做了一个粗略设置的 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) 目前我无法将 div 或任何内容放入下面的“此处”:

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

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

Answer 1

由于您在问题中标记了 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 而不是段落...