2

我正在为当地餐馆创建一个菜单页面。在菜单每个部分的基于文本的链接页面的顶部，例如：

开胃菜 | 汤和沙拉 | 主菜

这些的 HTML 标记是：

<a id="show_apps">Appetizers</a> | <a id="show_soups">Soups and Salads</a> | <a id="show_entrees">Entrees</a>

我的 CSS 设置如下：

#menu_container{
  width: 650px;
  height: auto;
  padding-left: 30px;
}

#menu_container div{display:none;}

菜单部分是这样设置的

<div id="menu_container">
  <div id="menu_apps">
    Content of the App Section Here
  </div>
  <div id="menu_soups">
    Content of the Soups Section Here
  </div>
  <div id="menu_entrees">
    Content of the Entrees Section Here
  </div>
</div>

我试图找到解决方案的是，当有人单击每个部分的链接时，它将显示该 DIV，但如果他们单击另一个部分，它将用下一个替换当前查看的 div。示例：用户单击“开胃菜”，DIV 加载，然后单击“汤和沙拉”，“开胃菜”DIV 关闭，“汤”DIV 显示，因此多个 div 一次不可见。我一直在玩弄 show()、hide() 甚至是 toggle()，但我不知道如何获得单击其他链接以重新隐藏并仅显示目标 DIV 的最终结果。我希望这是有道理的。

TIA 提供任何见解！

4

4 回答 4

2

看看这个jsFiddle

<div id='nav'>
    <a id="show_apps">Appetizers</a> | <a id="show_soups">Soups and Salads</a> | <a id="show_entrees">Entrees</a>
</div>


$(document).ready(function(){
   $("#nav a").click(function(){
      var id =  $(this).attr('id');
      id = id.split('_');
      $("#menu_container div").hide(); 
      $("#menu_container #menu_"+id[1]).show();
   });
});
于 2013-08-19T04:43:36.600 回答
1

尝试这个：

$(document).ready(function () {
    $("#menu_apps").slideUp("fast");
    $("#menu_entrees").slideUp("fast");
    $("#menu_soups").slideUp("fast");

    $("#show_apps").click(function (){
        $("#menu_entrees").slideUp("fast");
        $("#menu_soups").slideUp("fast");
        $("#menu_apps").slideToggle("fast");
    });
    $("#show_entrees").click(function (){
        $("#menu_apps").slideUp("fast");
        $("#menu_soups").slideUp("fast");
        $("#menu_entrees").slideToggle("fast");
    });
    $("#show_soups").click(function (){
        $("#menu_apps").slideUp("fast");
        $("#menu_entrees").slideUp("fast");
        $("#menu_soups").slideToggle("fast");
    });
});

jsfiddle

于 2013-08-19T04:25:46.473 回答
1

这段代码将对您有所帮助，您可以将其组合成 1 个功能，但为了您的理解，我没有这样做。

$(document).ready(function(){

    $("#show_apps").click(function(){
         $("#menu_apps").show();
         $("#menu_soups").hide();
         $("#menu_entrees").hide();
    });

    $("#show_soups").click(function(){
         $("#menu_apps").hide();
         $("#menu_soups").show();
         $("#menu_entrees").hide();
    });

    $("#show_entrees").click(function(){
         $("#menu_apps").hide();
         $("#menu_soups").hide();
         $("#menu_entrees").show();
    });
});
于 2013-08-19T04:00:57.753 回答
0

你可以用简单的方式做到这一点。检查下面的代码

HTML

<a id="apps" class="anchorLinks" href="#">Appetizers</a> | <a id="soups" class="anchorLinks" href="#">Soups and Salads</a> | <a id="entrees" class="anchorLinks" href="#">Entrees</a>

<div id="menu_container">
  <div id="menu_apps">
    Content of the App Section Here
  </div>
  <div id="menu_soups">
    Content of the Soups Section Here
 </div>
 <div id="menu_entrees">
    Content of the Entrees Section Here
  </div>
</div>

jQuery

$('.anchorLinks').click(function () {
    $('#menu_container>div').hide();
    $('#menu_'+$(this).attr('id')).show();
});
于 2013-08-19T04:46:56.287 回答