我在做一个选项卡功能,当鼠标出发mouseover之后,隐藏全部div,再显示相对应的div。但是目前出现了一个问题,就是只显示<div id="#D1"></div>中的一个元素,而不是显示<div id="#D1"></div>所有的元素。
是不是我写错了,应该怎样写才能显示#D1,#D2中的所有元素?
$(document).ready(function(){
$("#DC :not(:first-child)").hide();
$('#DesignList li').bind('mouseover',function(){
$('#DesignList li').removeClass('TS');
$(this).addClass('TS');
$('#DC div').hide();
$($(this).attr('id')).show();
});
}); <div class="BRTitle">
<ul id="DesignList">
<li id="#D1" class="TS">LOGO设计</li>
<li id="#D2">名片设计</li>
<li id="#D3">单页设计</li>
<li id="#D4">画册设计</li>
<li id="#D5">包装设计</li>
<li id="#D6">台历设计</li>
<li id="#D7">手提袋设计</li>
</ul>
</div>
<div id="DC">
<div id="D1">
<img class="Pic" src="images/LOGO-1.jpg" width="180" height="180" alt="LOGO-1" />
<img class="Pic" src="images/LOGO-2.jpg" width="180" height="180" alt="LOGO-1" /><span>W</span></div>
<div id="D2"><img class="Pic" src="images/LOGO-2.jpg" width="180" height="180" alt="LOGO-2" /> abb <img class="Pic" src="images/LOGO-2.jpg" width="180" height="180" alt="LOGO-2" />12312312s</div>
<div id="D3"><img class="Pic" src="images/LOGO-3.jpg" width="180" height="180" alt="LOGO-3" /></div>
<div id="D4"><img class="Pic" src="images/LOGO-4.jpg" width="180" height="180" alt="LOGO-4" /> <img class="Pic" src="images/LOGO-4.jpg" width="180" height="180" alt="LOGO-4" /></div>
<div id="D5"></div>
<div id="D6"></div>
<div id="D7"></div>
</div>
是不是我写错了,应该怎样写才能显示#D1,#D2中的所有元素?
$(document).ready(function(){
$("#DC :not(:first-child)").hide();
$('#DesignList li').bind('mouseover',function(){
$('#DesignList li').removeClass('TS');
$(this).addClass('TS');
$('#DC div').hide();
$($(this).attr('id')).show();
});
}); <div class="BRTitle">
<ul id="DesignList">
<li id="#D1" class="TS">LOGO设计</li>
<li id="#D2">名片设计</li>
<li id="#D3">单页设计</li>
<li id="#D4">画册设计</li>
<li id="#D5">包装设计</li>
<li id="#D6">台历设计</li>
<li id="#D7">手提袋设计</li>
</ul>
</div>
<div id="DC">
<div id="D1">
<img class="Pic" src="images/LOGO-1.jpg" width="180" height="180" alt="LOGO-1" />
<img class="Pic" src="images/LOGO-2.jpg" width="180" height="180" alt="LOGO-1" /><span>W</span></div>
<div id="D2"><img class="Pic" src="images/LOGO-2.jpg" width="180" height="180" alt="LOGO-2" /> abb <img class="Pic" src="images/LOGO-2.jpg" width="180" height="180" alt="LOGO-2" />12312312s</div>
<div id="D3"><img class="Pic" src="images/LOGO-3.jpg" width="180" height="180" alt="LOGO-3" /></div>
<div id="D4"><img class="Pic" src="images/LOGO-4.jpg" width="180" height="180" alt="LOGO-4" /> <img class="Pic" src="images/LOGO-4.jpg" width="180" height="180" alt="LOGO-4" /></div>
<div id="D5"></div>
<div id="D6"></div>
<div id="D7"></div>
</div>
当鼠标移动到<li id="#D2">名片设计</li>上时,只能显示<div id="D2"></div>中的第一张图片和没有任何标记的文本内容