Fatal编程技术网
  • javascript/
  • Javascript 通过单击“下一步”和“上一步”按钮显示一组div

Javascript 通过单击“下一步”和“上一步”按钮显示一组div

javascript jquery html css

Javascript 通过单击“下一步”和“上一步”按钮显示一组div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有5个包含副本的div 我有一个后退和下一步按钮，用来显示每个div <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a> <div class="vote-result first"> this is example copy </div> <div class="vote-result">

我有5个包含副本的div

我有一个后退和下一步按钮，用来显示每个div

<a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a>

<div class="vote-result first">
  this is example copy
</div>

<div class="vote-result">
  this is some more copy
</div>

<div class="vote-result">
  some more copy
</div>

<div class="vote-result">
  this is the last div
</div>
第一次单击“下一步”按钮链接时，我想删除非类，将其显示为可单击，我可能也应该先禁用该链接，然后再重新启用它

$(".back-btn").removeClass("off");
一旦我显示最后一个div，我需要将off类添加到下一个btn并禁用它

我曾想过使用carouseljs插件来实现这一点，但现在这种做法有些过头了

我知道有一种方法可以做到这一点，但它需要根据单击的next（下一步）或back（后退）按钮为链接分配子类，这样它就知道接下来要显示什么div，以及删除或向链接添加off-class

我希望找到一个解决方案，使我能够添加更多的div的显示，而无需修改代码。非常感谢您的帮助。

请查看用于导航的jquerys.next（）函数。您还可以像这样检查最后一项

if($(this).is(':last-child'))
{
    $('.next-btn').removeClass('off');
}else{
    $('.next-btn').addClass('off');
}
每次单击导航按钮时检查，并对第一个按钮执行相同的操作查看用于导航的jquerys.next（）函数。您还可以像这样检查最后一项

if($(this).is(':last-child'))
{
    $('.next-btn').removeClass('off');
}else{
    $('.next-btn').addClass('off');
}
每次单击导航按钮时都要选中，并对第一个按钮执行相同的操作。

您的HTML文件：

<html>
    <head>
        <style>
            .vote-result { display: none; }
            .vote-result.first { display: block; }
            .off {
                color: Red;
            }
            a {
                color: blue;
            }
        </style>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="code.js"></script>
    </head>
    <body>
        <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a>

        <div class="vote-result first">
          this is example copy
        </div>

        <div class="vote-result">
          this is some more copy
        </div>

        <div class="vote-result">
          some more copy
        </div>

        <div class="vote-result">
          this is the last div
        </div>
    </body>
</html>

/**
 * The zero-based index of the <div class="vote-result"> element that is currently being shown
 * @var {Number}
 */
var activeIndex = 0;

function getNumberOfItems() {
    return $('.vote-result').length;
}

function synchronizeInterface() {
    var numberOfItems = getNumberOfItems(),
        lastIndex = numberOfItems - 1;

    $('.vote-result').removeClass('first');
    $('.vote-result').each(function(index) {
        if (index == activeIndex) {
            $(this).addClass('first');
        }
    })

    $('.back-btn').toggleClass('off', activeIndex == 0);
    $('.next-btn').toggleClass('off', activeIndex == lastIndex);
}

$(function() {
    $('.back-btn,.next-btn').on('click', function() {
        // If the button clicked is not deactivated
        if (!$(this).hasClass('off')) {
            // Determine whether the "Next" button was clicked (otherwise "Back" was clicked)
            var clickedNext = $(this).hasClass('next-btn');

            // Move the active index in the appropriate direction while not allowing it to fall outside the boundaries of appropriate indices
            activeIndex = clickedNext
                ? Math.min(activeIndex + 1, getNumberOfItems() - 1)
                : activeIndex = Math.max(0, activeIndex - 1);

            // Make sure the interface now reflects the updated JavaScript variables
            synchronizeInterface();
        }

        return false;
    });
});


.投票结果{显示：无；}
.vote-result.first{display:block；}
.关{
颜色：红色；
}
a{
颜色：蓝色；
}
| 
这是示例副本
这是更多的副本
再来一份
这是最后一节课
同一目录下的新“code.js”文件：

<html>
    <head>
        <style>
            .vote-result { display: none; }
            .vote-result.first { display: block; }
            .off {
                color: Red;
            }
            a {
                color: blue;
            }
        </style>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="code.js"></script>
    </head>
    <body>
        <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a>

        <div class="vote-result first">
          this is example copy
        </div>

        <div class="vote-result">
          this is some more copy
        </div>

        <div class="vote-result">
          some more copy
        </div>

        <div class="vote-result">
          this is the last div
        </div>
    </body>
</html>

/**
 * The zero-based index of the <div class="vote-result"> element that is currently being shown
 * @var {Number}
 */
var activeIndex = 0;

function getNumberOfItems() {
    return $('.vote-result').length;
}

function synchronizeInterface() {
    var numberOfItems = getNumberOfItems(),
        lastIndex = numberOfItems - 1;

    $('.vote-result').removeClass('first');
    $('.vote-result').each(function(index) {
        if (index == activeIndex) {
            $(this).addClass('first');
        }
    })

    $('.back-btn').toggleClass('off', activeIndex == 0);
    $('.next-btn').toggleClass('off', activeIndex == lastIndex);
}

$(function() {
    $('.back-btn,.next-btn').on('click', function() {
        // If the button clicked is not deactivated
        if (!$(this).hasClass('off')) {
            // Determine whether the "Next" button was clicked (otherwise "Back" was clicked)
            var clickedNext = $(this).hasClass('next-btn');

            // Move the active index in the appropriate direction while not allowing it to fall outside the boundaries of appropriate indices
            activeIndex = clickedNext
                ? Math.min(activeIndex + 1, getNumberOfItems() - 1)
                : activeIndex = Math.max(0, activeIndex - 1);

            // Make sure the interface now reflects the updated JavaScript variables
            synchronizeInterface();
        }

        return false;
    });
});

/**
*当前显示的元素的从零开始的索引
*@var{Number}
*/
var-activeIndex=0；
函数getNumberOfItems（）{
返回$（'.vote result'）.length；
}
函数同步接口（）{
var numberOfItems=getNumberOfItems（），
lastIndex=numberOfItems-1；
$（'.vote result'）.removeClass（'first'）；
$（'.vote result'）。每个（函数（索引）{
if（index==activeIndex）{
$（this.addClass（'first'）；
}
})
$（'.back btn'）.toggleClass（'off'，activeIndex==0）；
$（'.next btn'）.toggleClass（'off'，activeIndex==lastIndex）；
}
$（函数（）{
$（'.back btn，.next btn'）。on（'单击'，函数（））{
//如果单击的按钮未停用
if（！$（this）.hasClass（'off'））{
//确定是否单击了“下一步”按钮（否则单击了“上一步”）
var clickedNext=$（this）.hasClass（'next-btn'）；
//在适当的方向上移动活动索引，同时不允许其落在适当索引的边界之外
activeIndex=单击下一步
？Math.min（activeIndex+1，getNumberOfItems（）-1）
：activeIndex=Math.max（0，activeIndex-1）；
//确保接口现在反映更新的JavaScript变量
同步接口（）；
}
返回false；
});
});
注意：在提供的HTML中，您的一个类属性有一个未关闭的双引号。另外，我添加了一些额外的样式——您可能希望将“.first”CSS类重命名为“.active”。

您的HTML文件：

<html>
    <head>
        <style>
            .vote-result { display: none; }
            .vote-result.first { display: block; }
            .off {
                color: Red;
            }
            a {
                color: blue;
            }
        </style>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="code.js"></script>
    </head>
    <body>
        <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a>

        <div class="vote-result first">
          this is example copy
        </div>

        <div class="vote-result">
          this is some more copy
        </div>

        <div class="vote-result">
          some more copy
        </div>

        <div class="vote-result">
          this is the last div
        </div>
    </body>
</html>

/**
 * The zero-based index of the <div class="vote-result"> element that is currently being shown
 * @var {Number}
 */
var activeIndex = 0;

function getNumberOfItems() {
    return $('.vote-result').length;
}

function synchronizeInterface() {
    var numberOfItems = getNumberOfItems(),
        lastIndex = numberOfItems - 1;

    $('.vote-result').removeClass('first');
    $('.vote-result').each(function(index) {
        if (index == activeIndex) {
            $(this).addClass('first');
        }
    })

    $('.back-btn').toggleClass('off', activeIndex == 0);
    $('.next-btn').toggleClass('off', activeIndex == lastIndex);
}

$(function() {
    $('.back-btn,.next-btn').on('click', function() {
        // If the button clicked is not deactivated
        if (!$(this).hasClass('off')) {
            // Determine whether the "Next" button was clicked (otherwise "Back" was clicked)
            var clickedNext = $(this).hasClass('next-btn');

            // Move the active index in the appropriate direction while not allowing it to fall outside the boundaries of appropriate indices
            activeIndex = clickedNext
                ? Math.min(activeIndex + 1, getNumberOfItems() - 1)
                : activeIndex = Math.max(0, activeIndex - 1);

            // Make sure the interface now reflects the updated JavaScript variables
            synchronizeInterface();
        }

        return false;
    });
});


.投票结果{显示：无；}
.vote-result.first{display:block；}
.关{
颜色：红色；
}
a{
颜色：蓝色；
}
| 
这是示例副本
这是更多的副本
再来一份
这是最后一节课
同一目录下的新“code.js”文件：

<html>
    <head>
        <style>
            .vote-result { display: none; }
            .vote-result.first { display: block; }
            .off {
                color: Red;
            }
            a {
                color: blue;
            }
        </style>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="code.js"></script>
    </head>
    <body>
        <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a>

        <div class="vote-result first">
          this is example copy
        </div>

        <div class="vote-result">
          this is some more copy
        </div>

        <div class="vote-result">
          some more copy
        </div>

        <div class="vote-result">
          this is the last div
        </div>
    </body>
</html>

/**
 * The zero-based index of the <div class="vote-result"> element that is currently being shown
 * @var {Number}
 */
var activeIndex = 0;

function getNumberOfItems() {
    return $('.vote-result').length;
}

function synchronizeInterface() {
    var numberOfItems = getNumberOfItems(),
        lastIndex = numberOfItems - 1;

    $('.vote-result').removeClass('first');
    $('.vote-result').each(function(index) {
        if (index == activeIndex) {
            $(this).addClass('first');
        }
    })

    $('.back-btn').toggleClass('off', activeIndex == 0);
    $('.next-btn').toggleClass('off', activeIndex == lastIndex);
}

$(function() {
    $('.back-btn,.next-btn').on('click', function() {
        // If the button clicked is not deactivated
        if (!$(this).hasClass('off')) {
            // Determine whether the "Next" button was clicked (otherwise "Back" was clicked)
            var clickedNext = $(this).hasClass('next-btn');

            // Move the active index in the appropriate direction while not allowing it to fall outside the boundaries of appropriate indices
            activeIndex = clickedNext
                ? Math.min(activeIndex + 1, getNumberOfItems() - 1)
                : activeIndex = Math.max(0, activeIndex - 1);

            // Make sure the interface now reflects the updated JavaScript variables
            synchronizeInterface();
        }

        return false;
    });
});

/**
*当前显示的元素的从零开始的索引
*@var{Number}
*/
var-activeIndex=0；
函数getNumberOfItems（）{
返回$（'.vote result'）.length；
}
函数同步接口（）{
var numberOfItems=getNumberOfItems（），
lastIndex=numberOfItems-1；
$（'.vote result'）.removeClass（'first'）；
$（'.vote result'）。每个（函数（索引）{
if（index==activeIndex）{
$（this.addClass（'first'）；
}
})
$（'.back btn'）.toggleClass（'off'，activeIndex==0）；
$（'.next btn'）.toggleClass（'off'，activeIndex==lastIndex）；
}
$（函数（）{
$（'.back btn，.next btn'）。on（'单击'，函数（））{
//如果单击的按钮未停用
if（！$（this）.hasClass（'off'））{
//确定是否单击了“下一步”按钮（否则单击了“上一步”）
var clickedNext=$（this）.hasClass（'next-btn'）；
//在适当的方向上移动活动索引，同时不允许其落在适当索引的边界之外
activeIndex=单击下一步
？Math.min（activeIndex+1，getNumberOfItems（）-1）
：activeIndex=Math.max（0，activeIndex-1）；
//确保接口现在反映更新的JavaScript变量
同步接口（）；
}
返回false；
});
});
注意：在提供的HTML中，您的一个类属性有一个未关闭的双引号。此外，我还添加了一些额外的样式——您可能希望将“.first”CSS类重命名为“.active”。

以下是您的解决方案。我已经为您的要求创建了

HTML代码：

<a class="back-btn off">Back</a> | <a class="next-btn">Next</a>

<div class="vote-result first selectedDiv">
  this is example copy
</div>

<div class="vote-result">
  this is some more copy
</div>

<div class="vote-result">
  some more copy
</div>

<div class="vote-result last">
  this is the last div
</div>
CSS代码：

.vote-result { display: none; }
.vote-result.first { display: block; }
.off{display:none;}
这是给你的解决方案。我已经为您的要求创建了

HTML代码：

<a class="back-btn off">Back</a> | <a class="next-btn">Next</a>

<div class="vote-result first selectedDiv">
  this is example copy
</div>

<div class="vote-result">
  this is some more copy
</div>

<div class="vote-result">
  some more copy
</div>

<div class="vote-result last">
  this is the last div
</div>
CSS代码：

.vote-result { display: none; }
.vote-result.first { display: block; }
.off{display:none;}
我会的