Question

我想基于id显示某些li。所以当我点击c1类时。它将显示关于 africa 的列表信息。现在它显示了演示代理的每个li。这个是＆＃34; menu＆＃34;。这是一张地图。点击大陆后，它会向下滚动并指向某个li id。所以当我点击c1类时。它指向li id="africa"并向我展示了文字。

但现在每个li id显示一次。我想隐藏所有li id africa-s.america。当我点击课程c1时，它会显示在li id 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>

然后信息

<div id="demo-agents" class="demo-agents-list wrapper">
  <ul>
    <li id="africa"><h3>Africa</h3><p>Some info about Africa</p>  </li>
    <li id="asia"><h3>Asia</h3><p>Some info about Asia</p>  </li>
    <li id="australia"><h3>Australia</h3><p>Some info about Australia</p>  </li>
    <li id="europe"><h3>Europe</h3><p>Some info about Europe</p>  </li>
    <li id="north-america"><h3>North America</h3><p>Some info about North America</p>  </li>
    <li id="south-america"><h3>South America</h3><p>Some info about South America</p>  </li>
  </ul>
</div>

和js

$(document).ready(function(){
  $('.c1').each(function () {
    if($(this).hasClass('selected')) {
       $('.demo-agents-list wrapper').hide();
       $('.' + $(this).attr('id')).fadeIn(600);
     }
     });

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

Answer 1

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

Answer 2

https://jsfiddle.net/jamesking/8rc2kepw/2/

line

Answer 3

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

Answer 4

CSS

/*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 }

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

根据ID

4 个答案: