0

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

我让它与一个选择框一起工作，但在环顾四周后，它很难设置选择框的样式并且不适合移动设备。

因此，我想创建一个下拉导航菜单，当用户单击菜单项时，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>

查询：

$(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 id="option1" class="eurowrapper" style="float: left;"> Content </div>

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

上述工作完美，在页面加载“总公司”联系方式在那里，当从“选择”框中选择另一个城镇时，这种情况会发生变化。

我想像我之前说的那样离开选择框并使用下拉导航，有什​​么方法可以让我拥有与选择框完全相同的功能，JS fiddle：

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

这是对 Alaa Badran 解决方案的一个小修改：我们可以做的不是隐藏所有 div，然后“显示”选定的一个，而是：将所有 div 的初始 CSS“显示”属性设置为“无”。像这样：

CSS:
#location1toN {
    display : none;
}

然后，当用户从您的下拉列表或链接中选择一个位置时，获取适当的 div 的 ID，如 Badran 所示，然后只需通过 jQuery 更改特定 div 的 CSS 属性，如下所示：

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

它基本上是相同的，但稍微更优化的解决方案。

或者另一种解决方案：由于它是一个联系页面，因此要填写的字段将基本相同，但其内容会根据所选位置而变化。所以你可以只有一个div，包含“地址”“联系电话”“电子邮件地址”等字段。然后，当用户从列表中选择一个位置时，您可以向服务器发送 AJAX 请求，获取联系方式从服务器，并更新一个div 的字段。由于是 AJAX，页面不会刷新。它可能会占用大量服务器，但绝对可以节省您创建 40 个 div！

于 2012-08-01T12:01:59.053 回答
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 回答