Question

我有一个jquery脚本，它将1 div替换为另一个div，并在选择时将1个链接替换为另一个：

$('.child2, a[href="#1"]').hide()

$('#replacepagelinks a').click(function(){
     $(this).hide().siblings().show()
     var w = this.hash.replace('#', '');
     $('#parent div.child'+w).show().siblings().hide()
})

这是我的HTML：

<div id="parent">
   <div class="child1">Child 1 Contents</div>
   <div class="child2">Child 2 Contents</div>
</div>
<div id="replacepagelinks">
     <a href="#1">Replace Child 1 with Child 2</a>
     <a href="#2">Replace Child 2 with Child 1</a>
</div>

请查看此jsfiddle http://jsfiddle.net/KaqZ5/以获取有效示例。

这很好用，但我需要它最多可以使用5个div：

在child1中，我只想<a href="#1">Replace Child 1 with Child 2</a>
在child2中，我希望<a href="#2">Replace Child 2 with Child 1</a>和<a href="#3">Replace Child 2 with Child 3</a>
在child3中，我希望<a href="#3">Replace Child 3 with Child 2</a>和<a href="#4">Replace Child 3 with Child 4</a>
在child4中，我希望<a href="#4">Replace Child 4 with Child 3</a>和<a href="#5">Replace Child 4 with Child 5</a>.
在child5中，我只想<a href="#5">Replace Child 5 with Child 4</a>

所以每个页面都有一个“下一个”和“后退”链接，除了第一个页面只有一个“下一个”链接，而最后一个页面只有一个“后退”链接，我需要它来支持2个子div ，3个孩子的div和4个孩子的div。

我对jquery的经验几乎是零，所以如果有人可以请更新我的jsfiddle，我将非常感激。

Answer 1

请参阅http://jsfiddle.net/Palpatim/KaqZ5/7/

上的更新小提琴

修改HTML：

<div class="menu">
    <div class="menu_item">
        <div class="parent">
            <div class="child1">Child 1 Contents</div>
            <div class="child2">Child 2 Contents</div>
            <div class="child3">Child 3 Contents</div>
            <div class="child4">Child 4 Contents</div>
            <div class="child5">Child 5 Contents</div>
        </div>
        <div class="nav">
            <a class="prev" href="#">Back</a>
            <a class="next" href="#">Next</a>
        </div>
    </div>

    <div class="menu_item">
        <div class="parent">
            <div class="child1">Child 1 Contents</div>
            <div class="child2">Child 2 Contents</div>
            <div class="child3">Child 3 Contents</div>
        </div>
        <div class="nav">
            <a class="prev" href="#">Back</a>
            <a class="next" href="#">Next</a>
        </div>
    </div>
</div>

新CSS

/* Initially hide all menu items */
.parent div {
    display: none;
}

/* Show active item */
.parent div.active {
    display: block;
}

/* If a nav link is disabled, color it grey and set the cursor to an arrow */
a[disabled="disabled"] {
    color: #999;
    cursor: default;
}

修改JavaScript

// Set the initial menu state: Each 'prev' link is disabled and the first menu item 
// for each menu block is active
$('a.prev').attr('disabled', 'disabled');
$('.parent div:first-child').addClass('active');

$('a.next').click(function() {
    // Find the parent menu container 
    // - parent of (this) is div.nav
    //   - parent of div.nav is div.menu_item
    var menu = $(this).parent().parent();

    // Find the currently active menu item
    var active = $('.active', menu);

    // Find the next menu item in the list
    var nextItem = active.next();

    // If there is a next menu item, make it active
    if (nextItem.length) {
        // Make current item inactive
        active.removeClass('active');
        // Make new item active
        nextItem.addClass('active');

        // If there's no item after the new item,
        // disable navigation
        if (!nextItem.next().length) {
            $('a.next', menu).attr('disabled', 'disabled');
        }

        // If we just clicked 'next', we can enable the 'prev' button
        if ($('a.prev', menu).attr('disabled') == 'disabled') {
            $('a.prev', menu).removeAttr('disabled');
        }
    }
});

// Pretty much same as above, with the directions reversed
$('a.prev').click(function() {
    var menu = $(this).parent().parent();
    var active = $('.active', menu);
    var prevItem = active.prev();
    if (prevItem.length) {
        active.removeClass('active');
        prevItem.addClass('active');
        if (!prevItem.prev().length) {
            $('a.prev', menu).attr('disabled', 'disabled');
        }
        if ($('a.next', menu).attr('disabled') == 'disabled') {
            $('a.next', menu).removeAttr('disabled');
        }
    }
});

以下是我对原作进行的一些重要更改：

使用CSS隐藏菜单项并使用.active类重新显示它们。这使得标记更清晰，并允许您设置样式
使用CSS可视地禁用导航链接，而不是完全禁止它们。您当然可以简单地隐藏它们，但如果它确实是用户导航，那么您希望它们能够看到链接根本不适用，而不是完全从它们的视图中删除它。
重新组织导航，将“Back”放在“Next”之前。如果您确实想要删除它，只需更改已禁用锚点的CSS定义。
将您的链接更改为使用类而不是

您应该考虑的其他一些优化：

将导航代码的内容重构为独立功能。无论你是向前还是向后，它几乎都是一样的，所以考虑通过传递父菜单元素和所需的方向来使函数更抽象。
使用jQuery分页插件，例如http://www.xarg.org/2011/09/jquery-pagination-revised/这些插件具有更强大的功能，在积极开发的插件的情况下，它们可能会比你能够做的更好的测试自己的。
您的网页上有两个导航块，但每个导航块都有id个属性冲突。 id在页面上必须是唯一的。我把它们换成了课程。
考虑菜单中有一个项目或没有项目的情况。这段代码会阻塞这些情况

可能有很多其他方法可以做到这一点，但这应该让你开始。为了进一步阅读，我建议仔细阅读jQuery文档。

Answer 2

这是我想出的：

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 <script type="text/javascript">
    function showPage(x){
        $("#parent div").hide();    //hide all pages        
        $('#parent div.child'+x).show();    //then show selected page           
    }
    function showLinks(x){              
        $('#replacepagelinks a').hide(); //hide all links               
        if(x>1)         
            $('#replacepagelinks a#'+(parseInt(x)-1)).show(); //if current page isn't the first one show back link

        $('#replacepagelinks a#'+(parseInt(x)+1)).show();  // show next link
    }
    $(document).ready(function(){                                   
        //$('#replacepagelinks span').on('click',function(e){       
        $(document).on('click', '#replacepagelinks a', function (e) {
            e.preventDefault();             
            var w = $(this).attr('id');
            showPage(w);
            showLinks(w);                       
        });     
    });
</script>
</head>
<body onload="showPage(1);showLinks(1);">
 <div id="parent">
  <div class="child1">Child 1 Contents</div>
  <div class="child2">Child 2 Contents</div>
  <div class="child3">Child 3 Contents</div>
  <div class="child4">Child 4 Contents</div>
</div>
<div id="replacepagelinks">
 <a href="#1" id="1">page 1</a>
 <a href="#2" id="2">page 2</a>
 <a href="#3" id="3">page 3</a>
 <a href="#4" id="4">page 4</a>  
</div>

</body>
</html>

使用Jquery替换多个DIV

2 个答案: