Question

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

开胃菜|汤和沙拉|主菜

这些的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！

Answer 1

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

Answer 2

这段代码可以帮到你，你可以把它组合成一个功能，但我还没有为了你的理解而这样做。

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

Answer 3

试试这个：

$(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

Answer 4

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

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

使用带有HTML文本链接的jQuery来显示/隐藏多个DIV

4 个答案: