我想基于id显示某些li
。所以当我点击c1类时。它将显示关于 africa 的列表信息。现在它显示了演示代理的每个li
。这个是" menu"。这是一张地图。点击大陆后,它会向下滚动并指向某个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。但你有什么建议吗?
答案 0 :(得分: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();
});
});
答案 1 :(得分:1)
答案 2 :(得分:0)
$(document).ready(function(){
$("#demo-agents li").hide();
$(".continents li").click(function(){
var crntlink = $(this).find("a").attr("href");
$("#demo-agents li").hide();
$(crntlink).show();
});
});
答案 3 :(得分:0)
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
})