0

多くのオフィスがある会社の連絡先ページを作成しているので、オフィスごとに新しいページを作成するのではなく、選択した場所に基づいてコンテンツを変更するだけで済みます。

私はそれを選択ボックスで動作させましたが、選択ボックスのスタイルを設定するのが難しいことを見て回った後、モバイルフレンドリーではありません。

したがって、代わりにドロップダウンナビゲーションメニューを作成し、ユーザーがメニュー項目をクリックすると、divの内容が変更されます（またはdivを非表示にして別のメニューに置き換えます）。たった2つのリンクで機能する以下のコードを見つけましたが、クライアントには40以上のオフィスがあるので、これを処理するためのより良い方法があるはずだと思いますか？各リンクまたはliに一意のIDを取得できます。

HTML：

<a href="#" id="link_1">Press me</a>
<a href="#" id="link_2">Press me</a>

<div id="div_1"> Content1 </div>
<div id="div_2"> Content2 </div>

Jquery：

$(document).ready(function(){
    // Hide div 2 by default
    $('#div_2').hide();

    $('#link_2').click(function() { 
        $('#div_1').hide();
        $('#div_2').show();
    });

    $('#link_1').click(function(){ 
        $('#div_2').hide();
        $('#div_1').show();
    }); 
});

質問を少し変更しても、同じ結果が必要です。

私は現在、以下を使用して希望どおりに機能する「選択ボックス」を使用しています。

JS：

<script type="text/javascript">
$(document).ready(function () {
$('.eurowrapper').hide();
$('#option1').show();
$('#selectMe').change(function () {
    $('.eurowrapper').hide();
    $('#'+$(this).val()).show();
})
});
</script>

HTML：

<div class="styled-select">
<select id="selectMe">
<option value="option1">Head Office</option>
<option value="option2">Belgravia</option>
<option value="option3">Brighton</option>
<option value="option4">Chelsea</option>
<option value="option5">Clapham</option>
<option value="option6">Glasgow</option>
<option value="option7">Holland Park</option>
<option value="option8">Hyde Park</option>
<option value="option9">Islington</option>
<option value="option10">Maidstone</option>
<option value="option11">Oxford</option>
<option value="option12">Reading</option>
<option value="option13">St John's Wood</option>
<option value="option14">Tower Bridge</option>
<option value="option15">Wapping</option>
<option value="option16">Cluttons Resorts</option>
</select>
</div>

そしてDivs：

<div id="option1" class="eurowrapper" style="float: left;"> Content </div>

<div id="option2" class="eurowrapper" style="float: left;"> More Content </div>

上記は完全に機能します。ページの読み込み時に「本社」の連絡先の詳細が表示され、「選択」ボックスから別の町を選択すると変更されます。

前に言ったように選択ボックスから離れて、ドロップダウンナビゲーションを使用したいのですが、選択ボックスとまったく同じ機能を持つことができる方法はありますか、JSフィドル：

http://jsfiddle.net/NY9bW/

4

3 に答える 3

1

私はあなたのための解決策を持っています：

Aタグを次のように変更します。

<a href="#id_of_div" class="links" id="link_1">Press me</a>
<a href="#id_of_div2" class="links" id="link_2">Press me</a>

そして、Divは次のようになります。

<div id="id_of_div" class="divs"> Content1 </div>
<div id="id_of_div2" class="divs"> Content2 </div>

そのためのjQueryは次のようになります。

$('a.links').click(function (e){
   e.preventDefault();
   var div_id = $('a.links').index($(this))
   $('.divs').hide().eq(div_id).show();
});
于 2012-08-01T11:07:28.373 に答える
0

取得した配列のインデックスを選択して使用できます。IDとしてハードコーディングする必要はありません。

var contentDivs = $('.contentDiv');

$('.links').click(function(){
  var index = $(this).index();

  $('.contentDiv').hide();
  $(contentDivs[index]).show();

});

ただし、これは、順序を変更すると同じオフィスに対応しなくなり、40のオフィスではエラーが発生することを意味します。

したがって、エラーが発生しにくい解決策は、オフィスにデータ属性、クラス、またはIDのいずれかを指定して、それらを識別できるようにすることです。あなたがしたように、しかし私は彼らに彼らの事務所に対応する名前を付けます。

<a href="#" class="contentLink" data-office="melbourne" >Press me</a>
<a href="#" id="contentLink" data-office="sydney" >Press me</a>

<div id="content_melbourne" class="contentDiv"> Content1 </div>
<div id="content_sydney" class="contentDiv"> Content2 </div>

<script>
$(document).ready(function(){
     $('.contentLink').click(function(){
     var office = $(this).attr('data-office');

     $('.contentDiv').hide();
     $('#content_' + office).show();

   });
});
</script>
于 2012-08-01T11:26:22.170 に答える
0

これは、Alaa Badranのソリューションの小さな編集です。すべてのdivを非表示にしてから、選択したdivを「表示」する代わりに、次のようにします。すべてのdivの初期CSS「display」プロパティを「none」に設定します。このような：

CSS:
#location1toN {
    display : none;
}

次に、ユーザーがドロップダウンまたはリンクから場所を選択したら、Badranが示しているように適切なdivのIDを取得し、jQueryを介して特定のdivのCSSプロパティを次のように変更します。

jQuery:
$(id_of_correct_div).css("display","block") ;

これは基本的に同じことですが、少し最適なソリューションです。

または別の解決策：連絡先ページであるため、入力するフィールドは基本的に同じですが、選択した場所に基づいて内容が変わります。したがって、「住所」、「連絡先番号」、「メールアドレス」などのフィールドを持つdivは1つだけにすることができます。次に、ユーザーがリストから場所を選択すると、サーバーにAJAXリクエストを送信して、連絡先の詳細を取得できます。サーバーから、1つのdivのフィールドを更新します。AJAXなので、ページは更新されません。サーバーが多いかもしれませんが、40divを作成する手間が省けます。

于 2012-08-01T12:01:59.053 に答える