Question

当我按下某个选项卡时如何显示内容？我希望您将其实现到我的代码中，谢谢。

html,
body {
  background: #24252A;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

.page {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px 40px;
}


/**/


/* main styles */


/**/

.pcss3t>input {
  position: absolute;
  left: -9999px;
}

.pcss3t>label {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  cursor: pointer;
}

.pcss3t>label i {
  display: block;
  float: left;
  margin: 16px 8px 0 -2px;
  padding: 0;
  border: 0;
  outline: none;
  font-family: FontAwesome;
  font-style: normal;
  font-size: 17px;
  position: relative;
}

.pcss3t>ul {
  position: relative;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=3.0.1');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=3.0.1') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}


/*----------------------------------------------------------------------------*/


/*                                   THEMES                                   */


/*----------------------------------------------------------------------------*/


/* default */

.pcss3t>label {
  padding: 0 20px;
  background: #3B4256;
  font-size: 13px;
  line-height: 49px;
}

.pcss3t>label:hover {
  background: #3B4256;
}

.pcss3t>input:checked+label {
  background: #3B4256;
}

.pcss3t>ul {
  background: #3B4256;
  text-align: left;
}


/* theme 1 */

.pcss3t-theme-1>label {
  margin: 0 5px 5px 0;
  border-radius: 5px;
  background: #3B4256;
  box-shadow: 0 2px rgba(0, 0, 0, 0.2);
  color: #808080;
  opacity: 0.8;
}

.pcss3t-theme-1>label:hover {
  background: #3B4256;
  opacity: 1;
}

.pcss3t-theme-1>input:checked+label {
  margin-bottom: 0;
  padding-bottom: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  color: #FFFFFF;
  opacity: 1;
}

.pcss3t-theme-1>.tab-content-first:checked~ul {
  border-top-left-radius: 0;
}

@media screen and (max-width: 767px) {
  .pcss3t-theme-1>label {
    margin-right: 0;
  }
}


/* height */

.pcss3t>ul,
.pcss3t>ul>li {
  height: 50em;
  background-color: #3B4256;
}

#tabs {
  background-color: #3B4256;
}

<div class="page">
  <!-- tabs -->
  <div class="pcss3t pcss3t-effect-scale pcss3t-theme-1">
    <input type="radio" name="pcss3t" checked id="tab1" class="tab-content-first">
    <label for="tab1"><i class="fas fa-book-open"></i>Forum</label>

    <input type="radio" name="pcss3t" id="tab2" class="tab-content-2">
    <label for="tab2"><i class="icon-picture"></i>Groups</label>

    <input type="radio" name="pcss3t" id="tab3" class="tab-content-3">
    <label for="tab3"><i class="icon-cogs"></i>Challanges</label>

    <input type="radio" name="pcss3t" id="tab4" class="tab-content-4">
    <label for="tab4"><i class="icon-globe"></i>Friends</label>

    <input type="radio" name="pcss3t" id="tab5" class="tab-content-last">
    <label for="tab5"><i class="icon-globe"></i>Feedback</label>

    <ul></ul>

Answer 1

您应该尝试一些简单的javascript技巧，如下所示：

function selecttab(obj){
  var tabid = $(obj).attr("for");
  $(".tabpage").hide();
  $("#page_" + tabid).show();
}

html,
body {
  background: #24252A;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

.page {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px 40px;
}


/**/


/* main styles */


/**/

.pcss3t>input {
  position: absolute;
  left: -9999px;
}

.pcss3t>label {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  cursor: pointer;
}

.pcss3t>label i {
  display: block;
  float: left;
  margin: 16px 8px 0 -2px;
  padding: 0;
  border: 0;
  outline: none;
  font-family: FontAwesome;
  font-style: normal;
  font-size: 17px;
  position: relative;
}

.pcss3t>ul {
  position: relative;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=3.0.1');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=3.0.1') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}


/*----------------------------------------------------------------------------*/


/*                                   THEMES                                   */


/*----------------------------------------------------------------------------*/


/* default */

.pcss3t>label {
  padding: 0 20px;
  background: #3B4256;
  font-size: 13px;
  line-height: 49px;
}

.pcss3t>label:hover {
  background: #3B4256;
}

.pcss3t>input:checked+label {
  background: #3B4256;
}

.pcss3t>ul {
  background: #3B4256;
  text-align: left;
}


/* theme 1 */

.pcss3t-theme-1>label {
  margin: 0 5px 5px 0;
  border-radius: 5px;
  background: #3B4256;
  box-shadow: 0 2px rgba(0, 0, 0, 0.2);
  color: #808080;
  opacity: 0.8;
}

.pcss3t-theme-1>label:hover {
  background: #3B4256;
  opacity: 1;
}

.pcss3t-theme-1>input:checked+label {
  margin-bottom: 0;
  padding-bottom: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  color: #FFFFFF;
  opacity: 1;
}

.pcss3t-theme-1>.tab-content-first:checked~ul {
  border-top-left-radius: 0;
}

@media screen and (max-width: 767px) {
  .pcss3t-theme-1>label {
    margin-right: 0;
  }
}


/* height */

.pcss3t>ul,
.pcss3t>ul>li {
  height: 50em;
  background-color: #3B4256;
}

#tabs {
  background-color: #3B4256;
}

.tabpage{
 height:300px;
 width:100%;
 background-color:#333;
 display:none;
 color:#fff;
 font-size:25px;
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">
  <!-- tabs -->
  <div class="pcss3t pcss3t-effect-scale pcss3t-theme-1">
    <input type="radio" name="pcss3t" checked id="tab1" class="tab-content-first">
    <label for="tab1" onclick="selecttab(this)"><i class="fas fa-book-open"></i>Forum</label>

    <input type="radio" name="pcss3t" id="tab2" class="tab-content-2">
    <label for="tab2" onclick="selecttab(this)"><i class="icon-picture"></i>Groups</label>

    <input type="radio" name="pcss3t" id="tab3" class="tab-content-3">
    <label for="tab3" onclick="selecttab(this)"><i class="icon-cogs"></i>Challanges</label>

    <input type="radio" name="pcss3t" id="tab4" class="tab-content-4">
    <label for="tab4" onclick="selecttab(this)"><i class="icon-globe"></i>Friends</label>

    <input type="radio" name="pcss3t" id="tab5" class="tab-content-last">
    <label for="tab5" onclick="selecttab(this)"><i class="icon-globe"></i>Feedback</label>
  </div>
  
  <div>
    <div id="page_tab1" class="tabpage" style="display:block;">tab1</div>
    <div id="page_tab2" class="tabpage">tab2</div>
    <div id="page_tab3" class="tabpage">tab3</div>
    <div id="page_tab4" class="tabpage">tab4</div>
    <div id="page_tab5" class="tabpage">tab5</div>
  </div>

如何使内容仅显示在某些选项卡上？

1 个答案: