1

所以我现在有这个代码。基本上我有一个按钮，你点击它，按钮所在的 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;
}
4

3 回答 3

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/

如果要加载其他页面，可以使用 jQueryload方法并将页面的路径存储在数据属性中，或者更好地使用锚链接而不是 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')
            })
        });
    });
});
于 2012-11-14T01:09:13.933 回答
0

试试这个

$(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');
        });

    });
});​

检查小提琴

于 2012-11-14T01:10:19.577 回答
0

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

于 2012-11-14T01:13:02.007 回答