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

创建一个函数，该函数将获取需要显示的元素的 id，单击时您只需使用所需的 id 运行该函数：

$(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 回答