首页 > 解决方案 > 单击选项卡中的下一步按钮时的下划线移动

问题描述

单击选项卡标题上的下一个按钮时,我需要一个下划线。如果我们单击选项卡,下划线可以正常工作,但如果我们点击下一个按钮,它会停留在关于选项卡上并且不会移动到下一个选项卡。请帮我将下划线移动到下一个标签。提前致谢

这是我显示内容的选项卡的代码。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
 body {font-family: Arial;}

  /* Style the tab */
.tab {
 overflow: hidden;
 border: 1px solid #ccc;
 background-color: #f1f1f1;
  }

  /* Style the buttons inside the tab */
  .tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
 transition: 0.3s;
 font-size: 17px;
  }

  /* Change background color of buttons on hover */
  .tab button:hover {

  }

  /* Create an active/current tablink class */
 .tab button.active {
 text-decoration: underline;
 text-decoration-thickness: 2px;
 text-decoration-color: #6A72EA;
 padding-bottom:2px;
 display:inline-block;
  }


  /* Style the tab content */
  .tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
 border-top: none;
  }

 #con {
 width: 370px;
 margin: auto;

      }
   .bgc{
   background-color: #6A72EA;
   color: white;
   text-align:center;
   margin-bottom: -16px;
   padding: 10px;
   border-radius:15px;
   }
   </style>
   </head>
   <body>

  <h2>Tabs</h2>
  <p>Click on the buttons inside the tabbed menu:</p>
  <div id = "con" >
  <div class="bgc">
  <p>
      Let's create you personal nutritional profile to determine your Macros & keep track of how much you should eat,which helps you to achieve your body goals!
    </p>
   </div>
   <div class="tab">
    <button class="tablinks" onclick="openTab(event, 'About')">About</button>
   <button class="tablinks" onclick="openTab(event, 'Activity level')">Activity level</button>
   <button class="tablinks" onclick="openTab(event, 'Goals')">Goals</button>
    <button class="tablinks" onclick="openTab(event, 'Result')">Result</button>
    </div>

  <div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Say some thing about yourself.</p>


    </div>

   <div id="Activity level" class="tabcontent">
   <h3>Activity level</h3>
   <p>How active are you?</p>
   </div>

   <div id="Goals" class="tabcontent">
   <h3>Goals</h3>
   <p>What is your goal</p>
   </div>
   <div id="Result" class="tabcontent">
   <h3>Result</h3>
   <p>This is the  New Result.</p>
  </div>
  </div>
 <script>
 function openTab(evt, tabName) {
 var i, tabcontent, tablinks;
 tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
  tabcontent[i].style.display = "none";
   }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
  tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
   document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
    }
   </script>

  </body>
  </html>

标签: javascriptjqueryhtml

解决方案


尝试这个

  <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style the tab */
 .tab {
  overflow: hidden;
   border: 1px solid #ccc;
   background-color: #f1f1f1;
     }

   /* Style the buttons inside the tab */
  .tab button {
   background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  }

 /* Change background color of buttons on hover */
 .tab button:hover {

 }

  /* Create an active/current tablink class */
 .tab button.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #6A72EA;
  padding-bottom:2px;
  display:inline-block;
  }


 /* Style the tab content */
.tabcontent {
  display: none;
 padding: 6px 12px;
 border: 1px solid #ccc;
 border-top: none;
 }

 #con {
 width: 370px;
 margin: auto;

  }
 .bgc{
 background-color: #6A72EA;
 color: white;
 text-align:center;
 margin-bottom: -16px;
 padding: 10px;
 border-radius:15px;
   }
  </style>
  </head>
  <body>

 <h2>Tabs</h2>
 <p>Click on the buttons inside the tabbed menu:</p>
 <div id = "con" >
 <div class="bgc">
 <p>
   Let's create you personal nutritional profile to determine your Macros & keep track of how much you should eat,which helps you to achieve your body goals!
 </p>
  </div>
 <div class="tab">
 <button class="tablinks About" onclick="openTab(event, 'About')">About</button>
 <button class="tablinks Activity" onclick="openTab(event, 'Activity level')">Activity level</button>
 <button class="tablinks Goals" onclick="openTab(event, 'Goals')">Goals</button>
 <button class="tablinks Result" onclick="openTab(event, 'Result')">Result</button>
 </div>

<div id="About" class="tabcontent">
<h3>About</h3>
<p>Say some thing about yourself.</p>


</div>

 <div id="Activity" class="tabcontent">
  <h3>Activity level</h3>
  <p>How active are you?</p>
  </div>

  <div id="Goals" class="tabcontent">
  <h3>Goals</h3>
  <p>What is your goal</p>
  </div>
<div id="Result" class="tabcontent">
<h3>Result</h3>
<p>This is the  New Result.</p>
</div>
</div>
<button id="next" onclick="nextTab()">Next</button>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script type="text/javascript">
  function nextTab(){
    $('button.tablinks').removeClass('active');
    var id=$('.tabcontent:visible').attr('id');
    if(id){
       $('.tabcontent:visible').next('.tabcontent').show();
      $('#'+id).hide();
      id=$('.tabcontent:visible').attr('id');
      $('button.tablinks.'+id).addClass('active');
    }else{
      $('#About').show();
       $('button.tablinks.about').addClass('active');
    }



  }
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
 for (i = 0; i < tabcontent.length; i++) {
  tabcontent[i].style.display = "none";
   }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
  tablinks[i].className = tablinks[i].className.replace(" active", "");
   }
   document.getElementById(tabName).style.display = "block";
   evt.currentTarget.className += " active";
   }
  </script>

  </body>
  </html>

推荐阅读