-3

新しいページを読み込むのではなく、レイアウトが変わるページを作成したいと考えています。アイデアは、ユーザーがアイテムをクリックしてから、ページ上のすべてのアイテムを再配置することです。これを行う方法は理解できますが、理解できないのは、各ページのリンクを作成する方法です。

したがって、ユーザーがアイテム A をクリックしてレイアウトを取得した場合、AI はそのリンクを取得したいと考えます。

ユーザーがアイテム B をクリックしてレイアウトを取得した場合、BI はそのリンクを作成したいと考えています。

何か案は？

4

2 に答える 2

3

HTML 本文のクラスを変更できます。これにより、レイアウトに応じて CSS のさまざまな部分を使用できるようになります。各リンクは、jQuery を使用してクラスを設定できます。

// In your javascript (within jQuery ready function)
$('#layoutTwoOne').click(function(event) {
    $('body').removeClass('layoutTwo').addClass('layoutOne');
});
$('#layoutTwoLink').click(function(event) {
    $('body').removeClass('layoutOne').addClass('layoutTwo');
});

あなたのHTMLで：

<a href="#" id="layoutOneLink">Switch to Layout One</a>
<a href="#" id="layoutTwoLink">Switch to Layout Two</a>

あなたのCSSで：

body.layoutOne {
    background-color: black;
}
body.layoutTwo {
    background-color: white;
}
body.layoutOne div {
    /* Some special css for all divs in layout one */
}

コードはよりデータ駆動型になる可能性があります。ちょっとしたハックですが、必要なことは実行できます。:)

于 2012-07-16T07:12:48.237 に答える
0

jQuery を使用している場合は、基本的に任意の要素をリンク/ボタンなどとして使用できます。

Jquery を使用すると、ユーザー インタラクションによってトリガーされるイベントに、ある種のイベント リスナーをアタッチできます。

  • マウスクリック
  • ダブルチックス
  • キーボードのキーダウン/アップ
  • 等...

これらのアクションは、HTML 内の任意の要素に添付できます。かもしれない -

  • <a>タグ_
  • <img>タグ_
  • または<td>テーブル<tr>構造
  • 一般的な<div>要素
  • 等...

任意の要素にクリックをバインドして、changeLayout()関数 (または同様のもの) をトリガーすることができます。単純な (シングル) クリック ハンドラーの構文は次のようになります。

$("#elementSelector").on('click',function(){
  // user has clicked the element!
  // do some cool animations and stuff!
});

この関数は、id属性が に等しいすべての要素に対してトリガーされelementSelectorます。

説明に適合する要素の例 -

  • <div id="elementSelector"></div>
  • <a href="#" id="elementSelector"></a>
  • <td id="elementSelector"></td>
于 2012-07-16T07:12:24.553 に答える