我有一个代码，如果我按“下一步”，它可以使我转到新文本，但是我也想创建另一个按钮，使我可以返回到我正在阅读的先前文本。
我知道我只是写了Previous，但是我不知道要返回的JavaScript。
$(function() {
$('.js-button').click(function() {
if ($('div.active').next().hasClass('hidemsg')) {
$('div.active').next('div').addClass('active').end().removeClass('active');
}else{
alert('Sorry, there is no next entry');
}
});
});.hidemsg {
display: none;
}
.hidemsg.active {
display: block;
}<!DOCTYPE html>
<html lang="en" class="no-js.june">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div id="msg1" class="hidemsg active">
<p class="content__item-copy-text">
1) Info here
</p>
</div>
<div id="msg2" class="hidemsg">
<p class="content__item-copy-text">
2) Info Here </p>
</div>
<div id="msg3" class="hidemsg">
<p class="content__item-copy-text">
3) Info Here </p>
</div>
<div id="msg4" class="hidemsg">
<p class="content__item-copy-text">
4) Info Here </p>
</div>
<div id="msg5" class="hidemsg">
<p class="content__item-copy-text">
5) Info Here </p>
</div>
<a href="#" type="button" class="btn btn-default js-button">Next</a>用以下几行替换您的JavaScript
$(function() {
$('#next').click(function() {
$('.hide-default').show();
if ($('div.active').next().hasClass('hidemsg')) {
$('div.active').next('div').addClass('active').end().removeClass('active');
} else{
alert('Sorry, there is no next entry');
}
});
$('#prev').click(function() {
//$('.hide-default').show();
if ($('div.active').prev().hasClass('hidemsg')) {
$('div.active').prev('div').addClass('active').end().removeClass('active');
} else{
alert('Sorry, there is no previous entry');
}
});
});
在CSS末尾添加以下CSS行
.hide-default{
display: none;
}
从您的html中删除以下行
<a href="#" type="button" class="btn btn-default js-button">Next</a>
并将这些行添加到您的html
<a id="prev" href="#" type="button" class="btn btn-default hide-default js-button">Previous</a>
<a id="next" href="#" type="button" class="btn btn-default js-button">Next</a>
使用它，就像一个饰物。
// Next
$('.js-button').click(function() {
if ($('div.active').next().hasClass('hidemsg')) {
$('div.active').next('div').addClass('active').end().removeClass('active');
}else{
alert('Sorry, there is no next entry');
}
});
// Previous
$('#previous_button').click(function() {
if ($('.active').prev().hasClass('hidemsg')) {
$('.active').prev('div').addClass('active').end().removeClass('active');
} else {
alert('Sorry, there is no previous entry');
}
});.hidemsg {
display: none;
}
.hidemsg.active {
display: block;
}<!DOCTYPE html>
<html lang="en" class="no-js.june">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div id="msg1" class="hidemsg active">
<p class="content__item-copy-text">
1) Info here
</p>
</div>
<div id="msg2" class="hidemsg">
<p class="content__item-copy-text">
2) Info Here </p>
</div>
<div id="msg3" class="hidemsg">
<p class="content__item-copy-text">
3) Info Here </p>
</div>
<div id="msg4" class="hidemsg">
<p class="content__item-copy-text">
4) Info Here </p>
</div>
<div id="msg5" class="hidemsg">
<p class="content__item-copy-text">
5) Info Here </p>
</div>
<a href="#" type="button" class="btn btn-default js-button">Next</a>
<a href="#" type="button" class="btn btn-default" id="previous_button">Previous</a>