在.content分区内的4个分区之间导航

Question

我有一个div.content，在这个div里面我有4个div（content-1，content-2，content-3，content-4）。

在这4个div中的每一个中，我都有两个按钮在这4个子div之间导航。

但我不知道如何正确地执行此操作，因为默认情况下，content-1div是显示的div，其他的都是隐藏的。

当我点击右边的按钮时，我想显示content-2div，但当我点击左边的按钮时我想返回到content-1div，但它不是这样工作的，在content-2div中，当我点击左按钮而不是显示content-1div时，它显示的是content-4div，我不知道如何做到这一点。

我在这里举了我的例子，这样你就可以更好地理解：http://jsfiddle.net/1t2xfw7e/

Jquery：

$(document).ready(function() {
    $(".left").click(function() {
        $(".content-1").hide();
        $(".content-4").show();
        return false;
    });
    $(".right").click(function() {
        $(".content-1").hide();
        $(".content-2").show();
        return false;
    });
});

Answer 1

不更改html标记。（这是有效的，但不是最佳的或完整的。这只是向你展示另一种方法）：

JS-FIDDLE

$(document).ready(function() {
    $(".content a").on("click", function(e){
        if (e.target.className=="right") {
            $(this).parent().next().show();
            $(this).parent().hide();
        }
        else if (e.target.className=="left") {
            $(this).parent().prev().show();
            $(this).parent().hide();
        }
    });
});

Answer 2

因为div是相似的，我认为这个解决方案是有效的：

 function getCurrIndex(obj, isLeft) {
        var re = /content-([0-9])/gi
        var cDiv = re.exec($(obj).parent().prop('className'));
        if (cDiv.length == 2) {
            var cDivIndex = parseInt(cDiv[1]);
            if (isLeft == true) {
                cDivIndex -= 1;
            } else {
                cDivIndex += 1;
            }
            if (cDivIndex <= 0) {
                cDivIndex = 4;
            } else {
                if (cDivIndex >= 4) {
                    cDivIndex = 1;
                }
            }
        }
        return cDivIndex;
    }
    $(document).ready(function() {
        $(".left").click(function() {
            $(this).parent().hide();
            $(".content-" + getCurrIndex(this, true)).show();
            return false;
        });
        $(".right").click(function() {
            $(this).parent().hide();
            $(".content-" + getCurrIndex(this, false)).show();
            return false;
        });
    });

Answer 3

$(document).ready(function() {
    $(".navigate").click(function(e) {
        e.preventDefault();
        
        var $this = $(this);
        
        //hide this one
        $this.parent().hide();
        //show the one that has the matching class from the data element.
        $('.'+ $this.data('show')).show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
    <div class="box-left">
        <div class="box-left-up">
            <h2>Test</h2>
            <div class="content">
                <div class="content-1">
                    <a class="navigate" href="#" data-show="content-4">Left</a>
                    <a class="navigate" href="#" data-show="content-2">Right</a>
                    <p>content 1</p>
                </div>
                <div class="content-2">
                    <a class="navigate" href="#" data-show="content-1">Left</a>
                    <a class="navigate" href="#" data-show="content-3">Right</a>
                    <p>content 2</p>
                </div>
                <div class="content-3">
                    <a class="navigate" href="#" data-show="content-2">Left</a>
                    <a class="navigate" href="#" data-show="content-4">Right</a>
                    <p>content 3</p>
                </div>
                <div class="content-4">
                    <a class="navigate" href="#" data-show="content-3">Left</a>
                    <a class="navigate" href="#" data-show="content-1">Right</a>
                    <p>content 4</p>
                </div>
                <div class="pages">
                    <p>Page 1 of 4</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 4

在事件处理程序中使用$(this).parent().prev()和$(this).parent().next()

$(document).ready(function() {
    $(".left").click(function() {
        $(this).parent().hide()
        $(this).parent().prev().show();
        return false;
    });
    $(".right").click(function() {
        $(this).parent().hide()
        $(this).parent().next().show();
        return false;
    });
});

http://jsfiddle.net/divyanthj/rtvn7L49/1/

Answer 5

此代码之所以有帮助，是因为根据您的规范，您希望向左或向右单击并显示或隐藏内容-1或内容-2。如果您想显示内容-3或内容-4，那么此代码会变得更加复杂。

使用返回多个"节点"的css类选择器是没有问题的，尽管这篇文章有一条注释。

$(".left").click(function () {
    $(".content-2").hide();
    $(".content-1").show();
    return false;
});
$(".right").click(function () {
    $(".content-1").hide();
    $(".content-2").show();
    return false;
});