javascript - 单击选项卡中的下一步按钮时的下划线移动
问题描述
单击选项卡标题上的下一个按钮时,我需要一个下划线。如果我们单击选项卡,下划线可以正常工作,但如果我们点击下一个按钮,它会停留在关于选项卡上并且不会移动到下一个选项卡。请帮我将下划线移动到下一个标签。提前致谢
这是我显示内容的选项卡的代码。
<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>
解决方案
尝试这个
<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>
推荐阅读
- python - 使用 3 列在 pandas 中合并 2 个数据框
- google-bigquery - Bigquery:通过通用表达式语言 (CEL) 条件授予对特定表的权限
- reactjs - React - 使用 Immer.js 的 Redux
- javascript - 从列表js中获取3个具有概率的随机数
- google-chrome - 调用 showOpenFilePicker :调用类方法时如何避免“必须来自手势”
- sql-server - 在 SQL Server 中获取重复行
- go - 如何处理低内存占用的大文件上传?
- javascript - Postgres检查表的列中是否存在值
- android - 卡片视图中的图像未完全填充
- python - 我的输出不断重复。我该怎么办?