Question

我正在尝试使用Jquery来解决我的下一个问题。

我有以下HTML链接。

<ul class="tabHead tabs-nav"> 
    <li class="tabs-selected" id="tab-1">
    <a id="tab1" class="load-fragment" href="/index.aspx"><span>Overview</span></a>
    </li>
    <li id="tab-2">
    <a id="tab2" class="load-fragment" href="/guide.aspx"><span>Guide</span></a>
    </li>
    <li id="tab-3">
    <a id="tab3" href="/flightschedule.aspx"><span>Flight Schedule</span></a>
    </li>
    <li id="tab-4">
    <a id="tab4" href="/specialOffers.aspx"><span>Special Offers</span></a>
    </li>
    <li id="tab-5">
    <a id="tab5" class="load-fragment" href="/photo.aspx"><span>Photos</span></a>
    </li>   
</ul>

首先上面的HTML动态生成，我在class =“load-fragment”上写了一个jquery，请看下面的

$(document).ready(function() 
{
        $(".load-fragment").each(function() 
        {           
            var fname = $(this).attr('href');
            var lastSlash = fname.lastIndexOf('/');
            var fileName = fname.substring(lastSlash+1, fname.lastIndexOf('.aspx')); //taking out filename for adding it in dynamic DIVs

            var dynDivID = "divContent"+fileName;
            $(this).attr("id",fileName)

            var newDiv = $("<div>").attr("id",dynDivID).load(fname + " #tabs-container",function ()
            {               
                $(this).hide();

            });      
            $("#column2").append(newDiv); //adding new div in div column2  
        });    

        $("#tab1").click(function()
        {
            // load home page on click
            $(this).attr("href", "#");
            $(".tabs-nav li").removeClass("tabs-selected"); //remove selected from other tabs
            $(this).parent().addClass("tabs-selected");
            $("#divContentindex").show();
            $("#tabs-container").hide();
            $("#divContentguide").hide();
            $("#divContentphoto").hide();
        });
        $("#tab2").click(function()
        {
            // load about page on click
            $(this).attr("href", "#");
            $(".tabs-nav li").removeClass("tabs-selected"); //remove selected from other tabs
            $(this).parent().addClass("tabs-selected");  
            $("#divContentguide").show();
            $("#tabs-container").hide();
            $("#divContentindex").hide();
            $("#divContentphoto").hide();
        });
        $("#tab5").click(function()
        {
            // load about page on click
            $(this).attr("href", "#");
            $(".tabs-nav li").removeClass("tabs-selected"); //remove selected from other tabs
            $(this).parent().addClass("tabs-selected"); 
            $("#divContentphoto").show();
            $("#tabs-container").hide();
            $("#divContentguide").hide();
            $("#divContentindex").hide();
        });

});

如果你看到上面的代码，我已经将动态div （divContentindex，divContentguide，divContentphoto）添加到DIV“ column2 ”，我想避免写下面的代码对于动态DIV的隐藏和显示，我希望它也应该是动态的，不应该有任何编码的DIV ID，因为这些ID是动态创建的。

请建议！

感谢。

最诚挚的问候， MS

Answer 1

替换

var lastSlash = fname.lastIndexOf('/');
var fileName = fname.substring(lastSlash+1, fname.lastIndexOf('.aspx')); // ...
var dynDivID = "divContent"+fileName;
$(this).attr("id",fileName)

通过

var dynDivID = "divContent"+$(this).attr('id');

添加newDiv.addClass('dynDiv'); 在$("#column2").append(newDiv);之前

并替换所有

$("#tabX").click(function() { ... });

通过

$(".load-fragment").click(function() {
    // load about page on click
    var thiz = $(this);
    thiz.attr("href", "#");
    $(".tabs-nav li").removeClass("tabs-selected"); // ...
    thiz.parent().addClass("tabs-selected");
    $('.dynDiv').hide();
    $("#divContent" + thiz.attr("id")).show();
}

应该做的工作（未经测试）

根据评论编辑

Answer 2

简短形式：

$(document).delegate('.tabs-nav li a.load-fragment', 'mouseenter', function (ev) {
    var _link = $(this),
        _div = _link.data('dynDiv');
    if (_div) return;
    var newDiv = $('<div>').hide()
        .addClass('dynamic')
        .load(_link.attr('href')+' #tabs-container', function () {
            var onLoad = _link.data('dynOnLoad');
            if (onLoad) onLoad(this);
            _link.data('dynLoaded', true);
        })
        .appendTo('#column2');
    _link.data('dynDiv', newDiv);
});
$(document).delegate('.tabs-nav li a.load-fragment', 'click', function (ev) {
    var _link = $(this),
        _div = _link.data('dynDiv'),
        onLoad = function () {
            $('#column2 .dynamic').hide();
            _div.show();
        };
    if (!_link.data('dynLoaded')) _link.data('dynOnLoad', onLoad);
    else  onLoad();
});

我选择了mouseenter上的负载，因为它是在dom准备好的前端加载（可能阻碍页面加载时间）和点击加载（这可能会妨碍用户体验）之间的权衡。预测在mouseenter上加载可以获得两个世界的大部分内容，$（document）.delegate可以让你将脚本放在头部，这样你就可以在没有不受欢迎的内容的情况下生活。它确实需要一些事件间通信，以避免在内容可能准备好之前显示内容，但朋友之间有什么.data（）？

使用Jquery在主页上加载页面片段

2 个答案: