Question

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

a）我的问题是我的标签工作得相当好，但一旦点击它就不会保持活跃的紫色状态。我尝试了一些解决方案但无济于事。

b）此外，我无法弄清楚如何使用＆＃34;项目1＆＃34;加载页面时默认打开选项卡。

如果可能，我想避免使用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”或其他任何内容放入＆＃34; here＆＃34;下面：

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

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

Answer 1

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

b）默认情况下，您可以使用相同的active类来显示标签。

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

对于问题c：使用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; }标签在页面加载时不会高亮显示

＆＃13;

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

＆＃13;

    public BankAccount(int accountNumber , double balance) {
        // TODO Auto-generated constructor stub
        this.accountNumber = accountNumber;
        this.balance = balance;         
        System.out.println(this.accountNumber+"    "+this.balance);         
    }

    public BankAccount(int accountNumber) {
        // TODO Auto-generated constructor stub
        this.accountNumber = accountNumber;
        this.balance = 0;

        System.out.println(this.accountNumber+"    "+this.balance);
    }

＆＃13;

保持标签处于活动状态，默认情况下打开标签

3 个答案: