0

これが私が理解できなかった何らかの方法で以前にカバーされていたら申し訳ありません。

私は JavaScript/Jquery にやや慣れていないので、通常は何時間も無駄に時間を費やして、物事を理解するまで戦いますが、知識が不足しているため、未知のより簡単な解決策が利用可能である可能性があるため、物事が複雑になっている可能性があります。

2 種類のデザインを切り替えるポートフォリオ ページの JQuery UI タブを既に正常に実装しています。その後、私が気に入った AJAX を使用してそれぞれを読み込むことができましたが、私の状況では、コンテンツを分離する以外にどのように役立つかはわかりません。

次に、ul.tabs の代わりにテキスト リンクの使用に切り替えたいと考えました。私は常にタブからスタイルを取り除き、基本的なテキスト リンクとして表示させてきましたが、これを行うより直接的な方法があると考え、リンクをタブ付き領域からサイドバーに移動したいと考えました。ただし、テキスト リンクに AJAX を読み込ませる方法がわかりませんでした。

それを理解しようとした後、UI タブは私が必要とするものでさえあるのだろうかと思いました。2 つのコンテンツ セット間で前後にフェード インおよびフェード アウトする方法としてのみ使用しました。

これを行うためのはるかに簡単な方法があると思いますか？

2 つのテキスト リンク、Ajax で読み込まれる 2 つの html ファイル、変更間のフェードイン。それだけです。

これが私がhtmlを望む方法です-

<div id="sidebar">
  <ul>
    <li><a href="ajax/designs1">Designs 1</a></li>
    <li><a href="ajax/designs2">Designs 2</a></li>
  </ul>
</div>
<div id="content">
  This is where stuff will load
</div>

アクティブな li a にクラスを追加するのもいいと思います。そうすれば、スタイルを変えてテキスト カーソルを与えることができます。

ほんの数行の JavaScript/JQuery でこれを行うことはできますか?

また、JavaScript が無効になっている場合、両方の html ファイルを一度にロードする noscript メソッドはありますか?

無知で申し訳ありません。私はとても幸せで、助けに感謝します。

アップデート：

タブは気にしません。それらは素晴らしく、非常に使いやすいです。しばらくの間、彼らに私のポートフォリオを管理してもらいました。私は機能をほとんど使用していないことを知っており、重量に値するものではありません.

このサイトはしばらくダウンしていたので、あなたがくれたコードを自分で見つけようとして行き詰まりました。あなたが持っていたように、私はそれをうまく機能させることができませんでした。追加機能は私を混乱させました。クリックする前に何が追加されているのかわかりませんでした。しかし、試行錯誤を繰り返して、ほぼ完璧に機能させることができましたが、非表示セクションのフェードインとフェードアウトはすべてめちゃくちゃでした. 見える部分は完璧でした。

これが私が思いついたものです。私が言ったように、私は学習プロセスに深く関わっているので、何らかの理由で間違っている場合はこのコードを許してください.

$(document).ready(function(){
        $('#websites').hide();
        $('#hitlogo').addClass("activ");    

        $('#hitlogo').click(function() {
        $(this).addClass("activ");  
        $('#hitweb').removeClass("activ");
        $('#websites').fadeOut(1000);
        $('#logos').fadeIn(1000);
    })

     $('#hitweb').click(function() {
         $(this).addClass("activ"); 
         $('#hitlogo').removeClass("activ");
         $('#logos').fadeOut(1000);
         $('#websites').fadeIn(1000);
    })

});

フェードの問題を解決しようとするのをあきらめて、別のものに移りました。必要に応じてスタイルを設定できるように、クラスをクリックするたびにクラスを追加および削除できたときは、かなり誇りに思っていました。

提供されたコードを使用してページをロードしたところ、機能しているように見えます。フェードを追加するだけです。

読み込まれる html ページは、特定の方法で作成する必要がありますか? 現在、元のページ内にあった要素のグループだけで、他には何もありません。単独で見ると、CSS スタイルやその他の要素はありません。私は何かが欠けていますか、それとも JS が無効になっている人にとってはこれだけですか?

私はあなたの助けに感謝します。楽しく学べます。少し前に html と css をマスターしましたが、そろそろこれを学ぶ時が来ました。最初は恐ろしくもありましたが、徐々に概念を理解し始めていると思います。

再度、感謝します。

4

2 に答える 2

0

jQuery UI タブに問題はありません...プラグインはあなたの生活を楽にするはずです。

とにかく、 nettuts+で Ajax タブに関するこのチュートリアルをチェックしてください。私はあなたがそれを好きで、それから学ぶかもしれないと思います:)

編集:うーん...わかりました私はあなたの質問に答えなかったと思います。AjaX をロードするためのリンクを取得するには、クリック イベントをバインドするだけです。

<script type="text/javascript">
$(document).ready(function(){
 $('#sidebar a').click(function(){
  var url = $(this).attr('href');
  $('#content').load(url,loaded);
  return false;
 })
});
function loaded() {
 $('#content').show();
}
</script>

このようにすると、JavaScript が無効になっている場合でも、リンクから適切なページに移動できるため、サイトを適切に機能させることができます。JavaScript を使用しないと、フレームを使用せずに両方のページを一度に表示することはできません。

于 2009-10-16T05:05:42.830 に答える
0

これをすべて行う最も簡単な方法は、すべてのコンテンツを同じページに静的に配置することです。

その後、Noscript とシームレスに連携するように、Javascript ですべての対話を追加できます。

次のように書くことができます。

$(function() {
    $('#page2').hide();
    $('#linkContainer')
        .appendChild(
            $('<a href="#">Page 1</a>').click(function() {
                $('#page2').fadeOut();
                $('#page1').fadeIn();
            })
        ).appendChild(
            $('<a href="#">Page 2</a>').click(function() {
                $('#page1').fadeOut();
                $('#page2').fadeIn();
            })
        )
});

2 つ以上のページが必要な場合は、これをループで実行する必要があります。

于 2009-10-16T01:01:36.970 に答える