2

それが私の jQuery の始まりです。シンプルなコンテンツ スライド ナビゲーションを作成しました。これは完璧に機能しますが、コードを単純化する方法がわかりません。

$(document).ready(function(){
    // Sliding content navigation
    var active = ".active"
    $('a.europa').click(function () {
        $(active).hide("slide", { direction: "left" }, 500);
        $('#europa-view').delay(500).show("slide", { direction: "left" }, 500);
        $('#italia-view, #emilia-view').removeClass('active');
        $('#europa-view').addClass('active');        
    });

    $('a.italia').click(function () {
        $(active).hide("slide", { direction: "left" }, 500);
        $('#italia-view').delay(500).show("slide", { direction: "left" }, 500);
        $('#europa-view, #emilia-view').removeClass('active');
        $('#italia-view').addClass('active');
    });

    $('a.emilia').click(function () {
        $(active).hide("slide", { direction: "left" }, 500);
        $('#emilia-view').delay(500).show("slide", { direction: "left" }, 500);
        $('#europa-view, #italia-view').removeClass('active');
        $('#emilia-view').addClass('active');
    });
});

デモ </p>

4

3 に答える 3

2

これを試して：

Javascript:

// Sliding content navigation
var active = ".active"
$('a.sharedClass').click(function() {
    var name = $(this).attr('name');
    $(active).hide("slide", { direction: "left" }, 500).removeClass('active');

    $('#' + name).delay(500).show("slide", { direction: "left" }, 500)
                 .addClass('active');
});​

リストの新しい HTML:

<div id="view-navigator">
    <ul id="view-list">
        <li class="europa"><a href="#" class="europa sharedClass" name="europa-view">europa</a></li>
        <li class="italia"><a href="#" class="italia sharedClass" name="italia-view">italia</a></li>
        <li class="emilia"><a href="#" class="emilia sharedClass" name="emilia-view">emilia-romagna</a></li>
    </ul>
</div>

デモ: http://jsfiddle.net/maniator/Tbrvv/

于 2012-12-05T18:48:21.247 に答える
2

クラスを使用するようにコードを変更してみてください。下記参照、

デモ: http://jsfiddle.net/92HXT/272/

$(document).ready(function() {
    // Sliding content navigation
    var active = ".active"
    $('a.showcontent').click(function() {
        $(active).hide("slide", { direction: "left" }, 500);
        $('.news-list').removeClass('active');
        $('#' + this.name).delay(500).show("slide", { direction: "left" }, 500)
                          .addClass('active');
    });

});

以下のようにいくつかのマークアップを変更すると、

    <ul id="view-list">
        <li class="europa"><a href="#" class="europa showcontent" name="europa-view">europa</a></li>
        <li class="italia"><a href="#" class="italia showcontent" name="italia-view">italia</a></li>
        <li class="emilia"><a href="#" class="emilia showcontent" name="emilia-view">emilia-romagna</a></li>
    </ul>
于 2012-12-05T18:48:45.630 に答える
0

Make a function which will get id of element which need to show and on click you need only run that function with id you want:

$(document).ready(function(){
  var active = ".active";

  var clickEvent = function (itemToShow){
    $(active).hide("slide", { direction: "left" }, 500);
    $('#italia-view, #emilia-view, #europa-view').removeClass('active');
    $(itemToShow).delay(500).show("slide", { direction: "left" }, 500);
    $(itemToShow).addClass(itemToShow);
  }

  $('a.italia').click(clickEvent("#italia-view"));
  $('a.europa').click(clickEvent("#europa-view"));
  $('a.emilia').click(clickEvent("#emilia-view"));
}
于 2012-12-05T18:52:31.097 に答える