Javascript 基于id显示/隐藏ul li

我想根据id显示某些

li

。因此，当我单击class c1时。它只会显示有关非洲的列表信息。现在它显示了演示代理的每个

li

。这是“菜单”。这是一张地图。单击大陆后，它将我向下滚动并指向特定的

li id

。所以当我点击c1类时。它指向

li id=“africa”

并显示文本

但现在它会显示每个

li id

。我想隐藏所有

li id africa-s.america

。当我点击c1类时，它将显示在下面

LIID africa

<div id="map-continents">
  <ul class="continents">
    <li class="c1"><a href="#africa">Africa</a></li>
    <li class="c2"><a href="#asia">Asia</a></li>
    <li class="c3"><a href="#australia">Australia</a></li>
    <li class="c4"><a href="#europe">Europe</a></li>
    <li class="c5"><a href="#north-america">North America</a></li>
    <li class="c6"><a href="#south-america">South America</a></li>
  </ul>
</div>

我在CSS中隐藏div。但是你有什么建议吗

css

$(document).ready(function(){
  $("#demo-agents li").hide();
  $(".continents li").click(function(){
    var crntlink = $(this).find("a").attr("href");
    $("#demo-agents li").hide();
    $(crntlink).show();
  });
});

jquery

$("#map-continents li")
  .each(function() { //Show the one who is selected by default
    if ($(this).hasClass('selected')) {
      $('#demo-agents li').hide();
      $($(this).find("a").attr('href')).fadeIn(600);
    }
  })
  .on("click", function() { //bind click event
    $("#map-continents .selected").removeClass("selected") //Remove "selected" class
    $(this).addClass("selected")        
    $('#demo-agents li').hide(); //Hide the maps again
    $($(this).addClass("selected").find("a").attr('href')).fadeIn(600); //Show the right map
  })

css

jquery

$("#map-continents li")
  .each(function() { //Show the one who is selected by default
    if ($(this).hasClass('selected')) {
      $('#demo-agents li').hide();
      $($(this).find("a").attr('href')).fadeIn(600);
    }
  })
  .on("click", function() { //bind click event
    $("#map-continents .selected").removeClass("selected") //Remove "selected" class
    $(this).addClass("selected")        
    $('#demo-agents li').hide(); //Hide the maps again
    $($(this).addClass("selected").find("a").attr('href')).fadeIn(600); //Show the right map
  })

---

不工作：（.I编辑

并使用

$（.c1”）。单击（function（）{$（.ul”）.show（）；}）即可显示所有内容…如何选择要显示的内容..类似于（“ul，asia”）.showyou是对的，我犯了一个错误。我想你应该在这里学习我的示例。谢谢。它在JSFIDLE中工作，但在网站上不工作。我需要找到问题不工作的地方：（.i编辑
并使用
$（.c1”）。单击（function（）{$（（.ul”）.show（）；）
它正在显示所有……我如何选择显示哪一个……类似于（“ul，亚洲”）.showyou是对的，我犯了一个错误。我想你应该在这里学习我的示例。谢谢。它在JSFIDLE中工作，但在网站上不工作。我需要找到问题所在。这不回答问题这不回答问题当我在JSFIDLE上使用它时，它不工作，但在我的网站上不工作。我不明白。但许多感谢您实际测试了d它并创建了一个提琴。它现在应该在你的网站上运行。问题是我在JSFIDLE上使用它时，我没有点击文本，而是在地图上。它在我的网站上运行，但在我的网站上没有。我不明白。但许多感谢者实际测试了它并创建了一个提琴。它现在应该在你的网站上运行。问题是我没有点击文本，而是点击了maP
/*Hide the li with the maps, not the container div. the container div
  must be visible, or else the children will always be invisible.*/
#demo-agents li { display:none }

$("#map-continents li")
  .each(function() { //Show the one who is selected by default
    if ($(this).hasClass('selected')) {
      $('#demo-agents li').hide();
      $($(this).find("a").attr('href')).fadeIn(600);
    }
  })
  .on("click", function() { //bind click event
    $("#map-continents .selected").removeClass("selected") //Remove "selected" class
    $(this).addClass("selected")        
    $('#demo-agents li').hide(); //Hide the maps again
    $($(this).addClass("selected").find("a").attr('href')).fadeIn(600); //Show the right map
  })

    $(document).ready(function(){ 
       $("#demo-agents li").hide(); 
       $(".continents li").click(function(){ 
         var crntlink = $(this).find("a").attr("href"); 
         $("#demo-agents li").hide(); $(crntlink).show(); 
       }); 
   });

$(function() {
  $("#demo-agents li").hide();
   $(".continents li a").on('click', function(e) {
        var liToShow = $(this).attr("href");
        $("#demo-agents li").hide();
        $(liToShow).show();
        e.preventDefault();
    });
});