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


 <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>
 <div class="columnContent">
   <div class="c-tab-body">
     <div id="tab1" class="tab_content">
       <h1>This is pageA.</h1>
     <div id="tab2" class="tab_content">
       <h1>This is pageB.</h1>
     <div id="tab3" class="tab_content">
       <h1>This is pageC.</h1>
     <div id="tab4" class="tab_content">
       <h1>This is pageD.</h1>
     <div id="tab5" class="tab_content">
       <h1>This is pageE.</h1>
     <div id="tab6" class="tab_content">
      <h1>This is pageF.</h1>


/*  Navigation  */
  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;


(function () {
  $("ul.tabs li:first").addClass("active").show();
  $("ul.tabs li").click(function () {
    $("ul.tabs li").removeClass("active");
    var activeTab = $(this).find("a").attr("href");
    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.

Random recommended