Question

我创建了一个简单的标签面板。唯一的问题是，当我点击每个标签时，内容不会相应显示（假设在每个标签中显示）。而是首先显示所有内容而不选择。我想要的是，当我点击配置文件选项卡时，我只想显示配置文件的内容。但在这种情况下，所有这些都会显示出来。下面是我的简单代码。 TQS。

<html>
<head>
<script src="jquery-1.11.3.min.js" 
type="text/javascript"></script>
</head>


<body>

section {display:none;}
section:target {display:block;}





  <ul id="profileTabs" class="nav nav-tabs">
    <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#about" data-toggle="tab">About Me</a></li>
    <li><a href="#match" data-toggle="tab">My Match</a></li>
</ul>


<article class="tabs">
 <section id='profile'>
    <p>Hi, this is the first tab.</p>
  </section>
  <section id='about'>
    <p>Hi, this is the second tab.</p>
  </section>
  <section id='match'>
    <p>Hi, this is the third tab.</p>
  </section>
</article>


</body>
  </html>

Answer 1

简单地：

FIDDLE： https://jsfiddle.net/sfL7kd3h/

＆＃13;

section {display:none;}
section:target {display:block;}

＆＃13;

<ul id="profileTabs" class="nav nav-tabs">
    <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#about" data-toggle="tab">About Me</a></li>
    <li><a href="#match" data-toggle="tab">My Match</a></li>
</ul>


<article class="tabs">
 <section id='profile'>
    <p>Hi, this is the first tab.</p>
  </section>
  <section id='about'>
    <p>Hi, this is the second tab.</p>
  </section>
  <section id='match'>
    <p>Hi, this is the third tab.</p>
  </section>
</article>

＆＃13;

内容未显示在每个相应标签中

1 个答案: