1

だから私は現時点でこのコードを持っています。基本的に、私はあなたがそれをクリックするとボタンがあり、ボタンが閉じているdivが閉じ、別のdivがトグルします。問題は、クリックする内容に応じて、2 番目の div にさまざまなコンテンツをロードする一連のボタンを作成したいということです。これを達成するための最良の方法のアイデアはありますか? http://jsfiddle.net/PDzFj/

Jクエリ

$(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 に答える