current position:Home>HTML + JS + CSS realizes different switching of contents in the same page

HTML + JS + CSS realizes different switching of contents in the same page

2022-01-26 22:44:58 He Xiaoyi

html:

 <div class="columnNav">
   <ul class="tabs">
     <li class="active"><a href="#tab1"> Functional areas </a></li>
     <li><a href="#tab2"> Management and protection zoning </a></li>
     <li><a href="#tab3"> Fire rating </a></li>
     <li><a href="#tab4"> Checkpoints are distributed </a></li>
     <li><a href="#tab5"> Equipment distribution </a></li>
     <li><a href="#tab6"> Water source distribution </a></li>
   </ul>
 </div>
 <div class="columnContent">
   <div class="c-tab-body">
     <div id="tab1" class="tab_content">
       <h1>This is pageA.</h1>
     </div>
     <div id="tab2" class="tab_content">
       <h1>This is pageB.</h1>
     </div>
     <div id="tab3" class="tab_content">
       <h1>This is pageC.</h1>
     </div>
     <div id="tab4" class="tab_content">
       <h1>This is pageD.</h1>
     </div>
     <div id="tab5" class="tab_content">
       <h1>This is pageE.</h1>
     </div>
     <div id="tab6" class="tab_content">
      <h1>This is pageF.</h1>
     </div>
  </div>
</div>

css:

/*  Navigation  */
.columnNav{
  height: 0.5375rem;
}
.columnNav ul li{
  display: block;
  float: left;
  font-family: Arial,  Pingfang ,  Microsoft YaHei ;
  font-size: 0.225rem;
  font-weight: bolder;
  margin-right: 0.5rem;
  line-height: 0.5375rem;
  background: url(../images/index/linebefor.png) no-repeat center;
}
.columnNav ul li a{
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
}
.columnNav ul li a:hover,.columnNav ul li:hover{
  color: #fff;
  background: url(../images/index/line.png) no-repeat center;
}
.columnNav .active a{
  color: #fff;
}
.columnNav .active{
  background: url(../images/index/line.png) no-repeat center;
}

js:

(function () {
  $(".tab_content").hide();
  $("ul.tabs li:first").addClass("active").show();
  $(".tab_content:first").show();
  $("ul.tabs li").click(function () {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
  });
})();

    I hope my foolishness can help you ~, If there are deficiencies , I would also like to point out that , You have a better solution , Welcome to leave a message at the bottom of the comment area to support , Let's learn from each other ~

copyright notice
author[He Xiaoyi],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201262244570005.html

Random recommended