1

このブログに従って、jquery ベースの動的タブを開発しようとしています。左側のメニュー項目をクリックすると、新しいタブが開きます。しかし、タブからリンクコンテンツをクリックしてタブを開きたい場合、新しいタブを作成できません。基本的に、リンクされたページは同じタブで過負荷になっています。

同じために、html コードと jquery コードをjsfiddleにアップロードしました。

jsfiddle の結果パネルに、メニュー構造が表示されます。メニュー項目をクリックすると、タブが開きます。たとえば、index.html のコンテンツを含むタブが開かれています。

index.html にリンクを追加すると、クリックすると別のタブが開き、ドラゴンが表示されます。タブの内容は変更されていますが、リンクがクリックされた同じタブのすべてが異なります。

 <a href="anotherPage.html">Click Here to Open another Tab</a>

タブからのリンクのクリックでタブを作成する方法の提案。

4

2 に答える 2

1

私はあなたの問題をシミュレートしようとしましたが、css が含まれていないことがわかりました。JSFIDDLE.NETで作業中のものを参照してください

 body { font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif; font-size:13px; margin:0px auto;}
    #tabs { margin:0; padding:0; list-style:none; overflow:hidden; }
    #tabs li { float:left; display:block; padding:5px; background-color:#bbb; margin-right:5px;}
    #tabs li a { color:#fff; text-decoration:none; }
    #tabs li.current { background-color:#e1e1e1;}
    #tabs li.current a { color:#000; text-decoration:none; }
    #tabs li a.remove { color:#f00; margin-left:10px;}
    #content { background-color:#e1e1e1;}
    #content p { margin: 0; padding:20px 20px 100px 20px;}

    #main { width:900px; margin:0px auto; overflow:hidden;background-color:#F6F6F6; margin-top:20px;
         -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px;}
    #wrapper, #doclist { float:left; margin:0 20px 0 0;}
    #doclist { width:150px; border-right:solid 1px #dcdcdc;}
    #doclist ul { margin:0; list-style:none;}
    #doclist li { margin:10px 0; padding:0;}
    #documents { margin:0; padding:0;}

    #wrapper { width:700px; margin-top:20px;}

    #header{ background-color:#F6F6F6; width:900px; margin:0px auto; margin-top:20px;
         -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px; position:relative;}
    #header h2 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}
于 2013-03-13T18:21:56.870 に答える
1

問題は、ブラウザが通常どおりページを開くために使用する直接リンクを使用していることです。カスタムの JavaScript/JQuery タブを使用する場合は、リンクを変更して、ナビゲーションをクリックしたときと同じように、ページ内で新しいタブを開くクリック ハンドラーを使用するように変更する必要があります。ブログ投稿に基づくと、リンクでは href 属性ではなくドキュメント名に rel 属性を使用する必要があり、タブ リンクの場合と同じように JavaScript でクリック ハンドラーを割り当てる必要があります。おそらく、これらすべての仮想タブ リンクに共通のクラスを割り当てて、そのクラスを持つすべての要素にグローバルにクリック ハンドラーを割り当てることができるようにするのが最善の方法です。

于 2013-03-13T18:28:07.627 に答える