Question

所以我现在有这个代码。基本上我有一个你点击它的按钮和按钮关闭的div和另一个div切换。问题是我想制作一堆按钮，将根据您点击的内容加载到第二个div中的不同内容。有没有人对实现这一目标的最佳方法有任何想法？ http://jsfiddle.net/PDzFj/

Jquery的

$(function() {
$('.clickme').click(function() {
   var tot = $('.maindiv');
   var exp = $('.contentdiv');

   var frt = (tot.is(":visible"))?tot:exp;
   var lst = (tot.is(":visible"))?exp:tot;

   frt.slideToggle('slow','easeInOutExpo', function() {
   lst.slideToggle('slow','easeInOutExpo', function() {/*complete*/});
   });
});
});

HTML

<div class="wrapper">

<div class="maindiv">
<div class="button clickme">Page One</div>
<div class="button clickme">Page Two</div>
<div class="button clickme">Page Three</div>
<div class="button clickme">Page Four</div>
<div class="clearit"></div>
</div>

<div class="contentdiv">
<div class="button clickme">Back</div>
Different content loads here (eg. page one, page two, page three...)
</div>

</div>

CSS

.wrapper{
  width:800px;
}

.maindiv{
  width:760px;
  padding:20px;
  background:lightblue;
}

.contentdiv{
  width:760px;
  padding:20px;
  background:blue;
  display:none;
}

.button{
  background:#eee;
  height:100px;
  width:100px;
  text-align:center;
  line-height:100px;
  margin:2px;
  float:left;
}
.clearit{
  clear:both;
}

Answer 1

$(function() {
    $('.clickme').click(function() {
        // just cache the clicked element 
        var self = this;
        var tot = $('.maindiv');
        var exp = $('.contentdiv');

        var frt = (tot.is(":visible")) ? tot : exp;
        var lst = (tot.is(":visible")) ? exp : tot;

        frt.slideToggle('slow', function() {
            // and append it here
            lst.append(self).slideToggle('slow')
        });
    });
});

http://jsfiddle.net/EHKdp/

如果要加载其他页面，可以使用jQuery load方法并将页面路径存储在数据属性中，或者更好地使用锚点链接而不是div元素。

<div class="maindiv">
  <div class="button clickme" data-target="/path-to.file">Page One</div>
  <div class="button clickme" data-target="/path-to.file">Page Two</div>
  <div class="button clickme" data-target="/path-to.file">Page Three</div>
  <div class="button clickme" data-target="/path-to.file">Page Four</div>
  <div class="clearit"></div>
</div>

$(function() {
    $('.clickme').click(function() {

        var path = this.dataset.target;

        var tot = $('.maindiv');
        var exp = $('.contentdiv');

        var frt = (tot.is(":visible")) ? tot : exp;
        var lst = (tot.is(":visible")) ? exp : tot;

        frt.slideToggle('slow', function() {
            lst.load(path, function(){
               $(this).slideToggle('slow')
            })
        });
    });
});

Answer 2

试试这个

$(function() {
    $('.clickme').click(function() {
        var tot = $('.maindiv');
        var exp = $('.contentdiv');
        var html = $(this).html();
        exp.slideUp('slow', function() {
            $(this).html(html).delay(500).slideDown('slow');
        });

    });
});

<强> CHeck Fiddle

Answer 3

最好的方法是使用AJAX并从外部.txt文件加载文本，您可以快速了解如何执行此操作here.

Jquery切换 - 加载不同的内容

3 个答案: