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>

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

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

Divs应该是这样的：

<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

这是对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，其中包含“地址”，“联系号码”，“电子邮件地址”等字段。然后，当用户从列表中选择一个位置时，您可以发送一个AJAX请求服务器，从服务器获取联系人详细信息，并更新一个 div的字段。由于它是AJAX，因此页面不会刷新。它可能是服务器繁重的，但它绝对可以节省你创建40个div！

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

3 个答案: