Fatal编程技术网
  • javascript/
  • Javascript 在选项卡中单击“下一步”按钮时为移动添加下划线

Javascript 在选项卡中单击“下一步”按钮时为移动添加下划线

javascript jquery html

Javascript 在选项卡中单击“下一步”按钮时为移动添加下划线,javascript,jquery,html,Javascript,Jquery,Html,当单击选项卡标题上的“下一步”按钮时，我需要一条下划线。如果单击该选项卡，下划线将正常工作，但如果单击“下一步”按钮，下划线将停留在“关于”选项卡上，不会移动到下一个选项卡。请帮助我将下划线移动到下一个选项卡。提前谢谢 这是显示内容的选项卡的代码 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {fo

当单击选项卡标题上的“下一步”按钮时，我需要一条下划线。如果单击该选项卡，下划线将正常工作，但如果单击“下一步”按钮，下划线将停留在“关于”选项卡上，不会移动到下一个选项卡。请帮助我将下划线移动到下一个选项卡。提前谢谢

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

<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>


正文{字体系列：Arial；}
/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
文字装饰：下划线；
文字装饰厚度：2px；
文字装饰颜色：#6A72EA；
垫底：2件；
显示：内联块；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}
#骗局{
宽度：370px；
保证金：自动；
}
.bgc{
背景色：#6A72EA；
颜色：白色；
文本对齐：居中；
边缘底部：-16px；
填充：10px；
边界半径：15px；
}
标签
单击选项卡式菜单内的按钮：


让我们创建您的个人营养档案，以确定您的宏值，并跟踪您应该吃多少，这有助于您实现身体目标！


关于
活动水平
目标
结果
关于
说说你自己

活动水平
你有多活跃

目标
你的目标是什么

结果
这是新的结果

函数openTab（evt，tabName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
试试这个

  <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>


正文{字体系列：Arial；}
/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
文字装饰：下划线；
文字装饰厚度：2px；
文字装饰颜色：#6A72EA；
垫底：2件；
显示：内联块；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}
#骗局{
宽度：370px；
保证金：自动；
}
.bgc{
背景色：#6A72EA；
颜色：白色；
文本对齐：居中；
边缘底部：-16px；
填充：10px；
边界半径：15px；
}
标签
单击选项卡式菜单内的按钮：


让我们创建您的个人营养档案，以确定您的宏值，并跟踪您应该吃多少，这有助于您实现身体目标！


关于
活动水平
目标
结果
关于
说说你自己

活动水平
你有多活跃

目标
你的目标是什么

结果
这是新的结果

下一个
函数nextTab（）{
$（'button.tablinks'）.removeClass（'active'）；
var id=$（'.tabcontent:visible'）.attr（'id'）；
如果（id）{
$（'.tabcontent:visible'）。下一步（'.tabcontent'）.show（）；
$（'#'+id）.hide（）；
id=$（'.tabcontent:visible'）.attr（'id'）；
$（'button.tablinks.'+id）.addClass（'active'）；
}否则{
$（'#About'）.show（）；
$（'button.tablinks.about'）.addClass（'active'）；
}
}
函数openTab（evt，tabName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
我添加了下划线


身体{
字体系列：Arial；
}
/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{}
/*创建活动/当前tablink类*/
.tab按钮。激活{
文字装饰：下划线；
文字装饰厚度：2px；
文字装饰颜色：#6A72EA；
垫底：2件；
显示：内联块；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}
#骗局{
宽度