javascript - 只想在我的选项卡中使用 css 而不是 js 和查询

Question

这是部分代码，其中包含一些可以显示和隐藏某些内容的 div。实际上我正在使用一些 javascript 并且想知道我是否可以只使用 css 来获得相同的结果而没有 js 部分和 jquery-2.2.4.min.js ？

这是我想要的 jpg 示例 example.jpg

或指向 jsfiddle example: 的链接

$(document).ready(function() {
  $('.part').hide();
  $('.one').show();
});

$('.button').click(function(event) {
  $('.part').hide();
  var selectedPart = $(this).attr('id');
  var setActivePart = "." + selectedPart;
  $(setActivePart).show();
});

    html, body {
    height: 100%;
    margin: 0;
    }

    .all-content{
    float: left;
    height: auto;
    width: 200px;
    margin: 0 15px 0 0;
     }


    .button {
    cursor: pointer;
    padding: 0px 30px;
    display: block;
    margin: 2px 0px;
    max-width: 200px;
    background: red;
    }

    .button:hover {
    font-weight: bold;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="all-content">
    <span class="designername">MY NAME</span>
    <a class="button" id="one">About</a>
    <a class="button" id="two">Video</a>
    <a class="button" id="tree">Interview</a>
    </div>

    <div class="part one">
    Top by Alcer. Pants by Leo & Lin. Headpiece by Atelier Eight. Earrings by Kenneth Jay Lane at Pierre Winters. Chair and Bull Skill by Orient House.
    Top by Alcer. Pants by Leo & Lin. Headpiece by Atelier Eight. Earrings by Kenneth Jay Lane at Pierre Winters. Chair and Bull Skill by Orient House.
    Top by Alcer. Pants by Leo & Lin. Headpiece by Atelier Eight. Earrings by Kenneth Jay Lane at Pierre Winters. Chair and Bull Skill by Orient House.
</div>

    <div class="part two">
    Dress by Kate Sylvester. Headdress by Orient house. Earrings by Kenneth Jay at Pierre Winters.
    </div>

    <div class="part tree">
    Coat, Top and Pants by Modern Mistress. Earrings by Kenneth Jay Lane at Pierre Winters. Boots by Roc Australia.
    </div>

Answer 1

如 link 中所述，您可以使用隐藏的复选框来实现这一目的。 .

这种方法的唯一限制是要显示/隐藏的 div 应该插入到 HTML 中的标签和复选框之后。

.content {
  background-color: #eee;
  display: none; /*hiding the ".content" divs initially*/
  /*position the content to the right*/
  width: 75%;
  position: relative;
  right: 0;
}

/*This selector targets any ".content" div that comes immediately after a checked checkbox*/
.trigger:checked + .content {
  display: inline-block;
}

/*of course, hiding the checkbox:*/
.trigger {
  display: none;
}

label {
  /*position labels to the left*/
  width: 20%;
  position:relative;
  left: 0;
}

<div>
  <!-- The trigger label checks/unchecks the hidden checkbox -->
  <label for="about-trigger">About</label>
  <input type="checkbox" id="about-trigger" class="trigger"/>
  <div class="content">
    About content
  </div>
</div>

<div>
  <label for="video-trigger">Video</label>
  <input type="checkbox" id="video-trigger" class="trigger"/>
  <div class="content">
    Video content
  </div>
</div>