根據導航鏈接顯示不同的div內容

我正在爲擁有多個辦公室的公司創建聯繫頁面，因此他們不希望每個辦公室都有一個新頁面，而是希望僅根據所選位置更改內容。根據導航鏈接顯示不同的div內容

我得到它與一個選擇框，但環顧四周難以風格的選擇框，並不是移動友好。

所以相反，我想創建一個下拉導航菜單，當用戶單擊菜單項時，div內容將會改變（或隱藏div並將其替換爲另一個）。我發現下面的代碼只適用於兩個鏈接，但客戶端有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>

而且Div的：

<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/

來源

2012-08-01 RuFFCuT

這聽起來不像從SEO角度來看的最佳解決方案。 – 2012-08-01 11:04:23

@Rory McCrossan沒有它不適合搜索引擎優化，你是對的！它實際上是爲了他們的Facebook應用程序，所以沒關係，他們的現場網站有單獨的頁面;） – RuFFCuT 2012-08-01 11:10:44

Ajax自動完成的地方和加載結果？ – Shouvik 2012-08-01 11:14:57

我對你的解決方案：

改變成一個標籤：

<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-01 11:07:28

謝謝！雖然它不如我預期的那樣工作？ http://jsfiddle.net/RvYW5/ – RuFFCuT 2012-08-01 11:15:12

我更新了答案，它現在應該工作。 – 2012-08-01 11:40:04

不錯，謝謝你，雖然有一個問題，起初他們都顯示出來了，有沒有辦法直到第一個顯示出來才顯示出來？ – RuFFCuT 2012-08-01 12:00:34

您可以使用數組通過選擇他們得到的指數，它沒有必要硬編碼它們作爲一個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-01 11:26:22 Tosh

這是一個小編輯到阿拉·巴德蘭的解決方案：而不是隱藏所有div然後「秀」的選擇之一，我們所能做的是：設置初始CSS「顯示」的所有div的財產到「無」。就像這樣：

CSS: 
#location1toN { 
    display : none; 
}

然後，當用戶選擇從下拉或鏈接的位置，得到像巴德蘭適當的div的ID顯示，那麼就通過jQuery改變CSS屬性，特定的div，像這樣：

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

它基本上是一樣的東西，但稍微更優化的解決方案。

或者替代解決方案：由於它是聯繫人頁面，要填充的字段基本上是相同的，但其內容會根據所選位置而改變。因此，您只能使用一個 div，其中包含「地址」，「聯繫電話」，「電子郵件地址」等字段。然後，當用戶從列表中選擇一個位置時，可以向服務器發送AJAX請求，從服務器的聯繫方式，並更新一個格的字段。由於它是AJAX，頁面將不會被刷新。這可能是服務器沉重，但它絕對可以節省您創建40個div！

來源

2012-08-01 12:01:59

根據導航鏈接顯示不同的div內容

回答

相關問題