根据导航链接显示不同的div内容

Question

我正在为拥有多个办公室的公司创建联系页面，因此他们不希望每个办公室都有一个新页面，而是希望仅根据所选位置更改内容。

我得到它与一个选择框，但环顾四周难以风格的选择框，并不是移动友好。

所以相反，我想创建一个下拉导航菜单，当用户单击菜单项时，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/

Answer 1

我对你的解决方案：

改变成一个标签：

<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(); 
}); 

Answer 2

您可以使用数组通过选择他们得到的指数，它没有必要硬编码它们作为一个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> 

Answer 3

这是一个小编辑到阿拉·巴德兰的解决方案： 而不是隐藏所有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！