3

ユーザーがメニューをクリックすると、動的にタブを作成しています。参照される html ファイルは、動的に作成される iframe 内で開かれます。

すべてが正常に機能しましたが、タブ数が「3」を超え、ユーザーが前のタブをクリックすると、次の iframe が前の iframe コンテンツの下に表示されます。

以下は私が使用したコードです。誰が私が何をすべきか提案できますか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<script text/javascript>
$(document).ready(function() {
       var c=0;
       $("#documents a").click(function() {
       c++;
       addTab($(this),c);
       return false;        
       });

    $('#tab1 a.tab').live('click', function() {
        // Get the tab name
            i = 0;
            var chk;
            var contentname = $(this).attr("id") + "_content";

        var ifid=$("#content .dcontent:last iframe").attr("id");

            // hide all other tabs
            if(ifid>1)
            {
            for(i=ifid;i>0;i--) 
                {
                    fr = document.getElementById (i);
                    if (fr.style.display!='none')
                    {
                        fr.style.display="none";
                    }   
                }  
            }    

        //make the current frame visible 
        var lnm=$(this).attr("name");

        fr = document.getElementById (lnm);

        if (fr.style.display=='none')
            fr.style.display="block";

        $("#tab1 li").removeClass("current");

        // show current tab
        $(this).parent().addClass("current");

    });
});

/* Creation of Tab*/ 
function addTab(link,ct) {

    // If tab already exist in the list, return
   if ($("#" + $(link).attr("rel")).length != 0) 

return;

    // hide other tabs
$("#tab1 li").removeClass("current");

   if(ct>1)
   {
            for(i=ct-1;i>0;i--){    
                fr = document.getElementById (i);

                if (fr.style.display!='none')
                    fr.style.display="none";
            }  
   }

    // add new tab and related content
   $("#tab1").append("<li class='current'><a class='tab' id='" + $(link).attr("rel") + "' name='"+ct+"' href='" + $(link).attr("href") + "' target='" + $(link).attr("target") + "'>" + $(link).html() + "</a><a name ='"+ct+"' href='#' class='remove' >x</a></li>");

    var e = $('<div class="dcontent" ><li style="list-style:none;"><iframe id="'+ct+'" src='+$(link).attr("href")+' name="content" align="middle" width=600px; height=400px;> </iframe></li></div>');

    $('#content').append(e);   
}
</head>
    <body>

        <ul id="tabs">
            <!-- Tabs go here -->
            <div style="float: left;">
                <ul id="menu">                                
            <li> <a href="#">Next</a>
               <ul id="documents">
                        <li><a href="tab1.html" target="content" rel="1" >Document4</a></li>
                            <li><a href="tab2.html" rel="2"  target="content" >Document5</a></li>
                            <li><a href="tab3.html" rel="3"  target="content" >Document6</a></li>
                           <li><a href="tab4.html" rel="4"  target="content" >Document6</a></li>
                        </ul>
                    </li>

                </ul>

            </div>
        </ul>
        <ul id="tab1">
            <div style="float: left;">     
        </ul>

        <div id="content">              
        </div>
4

1 に答える 1

0

大きな問題は、要素を識別する方法です。0 から始まる数値の変数cがあり、リンクがクリックされるたびに増加し、iframe の 1 つとして ID として設定されます。ただし、作成したタブに数値 ID も設定しています。最終的に、これらの要素 ID が重複し、このようなエラーが発生します。

少なくとも、iframe の ID を

  • "frame_" + $(link).attr("rel")
  • 現在使用しているct数値変数ではなく( cのコピー)

たとえば、 rel属性が 2のボタンの ID は「frame_2」になります。この方法では、rel属性が 2 のボタンがランダムな数値 ID を持つフレームに接続されることはありません。

c変数を完全に取り除きます。

このループの代わりに:

if(ct>1) {
    for(i=ct-1;i>0;i--){    
        alert(i);
        fr = document.getElementById (i);

        if (fr.style.display!='none')
            fr.style.display="none";
    }  
}

使用する：

$("#content").children("div.dcontent").each(function() {
    var theFrame = $(this).find("li iframe");
    if ($(theFrame).attr("id") != ("frame_" + $(link).attr("rel"))) {
        $(theFrame).css("display", "none");
    }
});

そうすれば、 c変数からの任意の数値ではなく、rel属性をフレームの ID に簡単にリンクできます。

リンクに rel属性を指定したので、すべてにrel属性を使用する必要があります。data-buttonid のようなものを使用して .data() を使用してアクセスすることもできますが、それはあなた次第です。

次に、すべてを識別したら、その番号を使用してすべてをペアリングします。すなわち

  • フレーム ID: "frame_" + $(link).attr("rel")
  • タブ ID/名前: "tab_" + $(link).attr("rel")
  • 名前: "tab_anchor_" + $(link).attr("rel")

私が提供したコードでテストした結果、希望どおりに実行されました。

于 2013-04-19T00:27:31.873 に答える