CSS构建的table中带ID的li标签的隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.5study.net</title>
<style type="text/css">
* {margin:0;padding:0}
#main {margin:100px 0 0 200px}
#main ul {width:520px;list-style:none}
#main li {border-left:1px solid #ccc;border-top:1px solid #ccc;
float:left;width:102px;height:33px;text-align:center;line-height:33px}
#main li.b {border-bottom:1px solid #ccc}
#main li.r {border-right:1px solid #ccc}
</style>
</head>
<html>
<div id="main">
<ul>
<li id="yc">a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li class="r">e</li>
</ul>
<ul>
<li id="yc">f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li class="r">j</li>

<li id="yc">k</li>
<li>l</li>
<li>m</li>
<li>n</li>
<li class="r">o</li>

<li id="yc">p</li>
<li>q</li>
<li>r</li>
<li>s</li>
<li class="r" id="yc">t</li>

<li class="b">u</li>
<li class="b">v</li>
<li class="b">w</li>
<li class="b">x</li>
<li class="b r">y</li>
</ul>
</div>

<input type="button" value="display&show" onclick="fn()"/>
<body>

<script type="text/javascript">
function fn(){var iteml = document.getElementsByTagName("li");for (var j=0;j<iteml.length;j++){iteml[j].style.display="none";}}
</script>
</body>
</html>
我这样只可以隐藏全部的li 我想的是 var iteml = document.getElementsById("yc");
这样吧不要的那一列的li隐藏掉
但是好像不行 知道怎么做么
我要的就是一个可循环的类似于table东西。 我可以通过js来控制随便竖起的一列是显示还是隐藏。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>11</title>
<style type="text/css">
body{text-align:center;}
td {font-size: 12px;line-height:160%}
.dotline{background-image:url(images/dot_line.gif);background-repeat: repeat-x;background-position: bottom;}
</style>
</head>

<body>
<script language=JavaScript src="js/js.js"></script>
<table width="600" border="0" cellspacing="2" cellpadding="0">
<tr>
<td width="56" height="40" align="right" class="dotline"><img src="images/ico_q.gif" width="47" height="29"></td>
<td width="544" height="40" class="dotline"><a onClick=javascript:ShowFLT(1) href="javascript:void(null)">1.为什么我在加入购物车的时候提示“数量已超过该物品库存”?</a></td>
</tr>
<tr id=LM1 style="DISPLAY: none">
<td height="30" align="right" bgcolor="#f5f9ed"><img src="images/ico_a.gif" width="14" height="14" hspace="5"></td>
<td height="30" bgcolor="#f5f9ed">这是因为您要购买的数量超过了我们目前仓库中该物品的数量。比如说您想购物10件物品,而我们目前只有5件库存,所以系统会出现该提示,并会把尽可能多的物品加入您的购物车。</td>
</tr>
<tr>
<td height="40" align="right" class="dotline"><img src="images/ico_q.gif" width="47" height="29"></td>
<td height="40" class="dotline"><a onClick=javascript:ShowFLT(2) href="javascript:void(null)">2.“下次自动登录”有什么用?</a></td>
</tr>
<tr id=LM2 style="DISPLAY: none">
<td height="30" align="right" bgcolor="#f5f9ed"><img src="images/ico_a.gif" width="14" height="14" hspace="5"></td>
<td height="30" bgcolor="#f5f9ed"><p>如果您是我们的会员,在您登录的时候,会有一个下次自动登录选项。如果您是在家或者办公室上网的话,您可以选中它,这样当您下次再来的时候,就不用再手工登录了,会自动识别出您,并自动登录。</p>
</td>
</tr>

<tr>
<td height="40" align="right" class="dotline"><img src="images/ico_q.gif" width="47" height="29"></td>
<td height="40" class="dotline"><a onClick=javascript:ShowFLT(3) href="javascript:void(null)">3.为什么在付款的时候要“多加一个尾数”?</a></td>
</tr>
<tr id=LM3 style="DISPLAY: none">
<td height="30" align="right" bgcolor="#f5f9ed"><img src="images/ico_a.gif" width="14" height="14" hspace="5"></td>
<td height="30" bgcolor="#f5f9ed">因为我们的定单较多,难免会出现多个顾客同时汇款的情况。加个尾数可以方便我们识别您的汇款,以减少不必要的麻烦,并第一时间给您发货。如果有可能的话,我们还建议在您的汇款或者转帐附言中写明您的订单号。当然,您在付款后及时的通知我们也是必不可少的。</td>
</tr>

<tr>
<td height="40" align="right" class="dotline"><img src="images/ico_q.gif" width="47" height="29"></td>
<td height="40" class="dotline"><a onClick=javascript:ShowFLT(4) href="javascript:void(null)">4.什么是TrackBack,对我而言有何意义?</a></td>
</tr>
<tr id=LM4 style="DISPLAY: none">
<td height="30" align="right" bgcolor="#f5f9ed"><img src="images/ico_a.gif" width="14" height="14" hspace="5"></td>
<td height="30" bgcolor="#f5f9ed">简单说来,TrackBack 被设计用来提供一种方法以实现网站之间的互相通告。利用这种简单使用的方式,可以让您实现主动推送(Push)一条相关信息加进产品页面内。这样,不仅使用户在访问我们的网站时得到的高价值信息量更多,更能使您的 Blog 吸引到与您志同道合的朋友。</td>
</tr>

<tr>
<td height="40" align="right" class="dotline"><img src="images/ico_q.gif" width="47" height="29"></td>
<td height="40" class="dotline"><a onClick=javascript:ShowFLT(5) href="javascript:void(null)">5.我的 Blog 是否也支持 Trackback?</a></td>
</tr>
<tr id=LM5 style="DISPLAY: none">
<td height="30" align="right" bgcolor="#f5f9ed"><img src="images/ico_a.gif" width="14" height="14" hspace="5"></td>
<td height="30" bgcolor="#f5f9ed">作为一种协议和一项功能对其进行了实现,这是 TrackBack 的第一个实现。由于只有众多的站点都支持TrackBack,它的真正价值才能得以体现,所以 TrackBack 从一开始就被设计为一个开放系统:一个其它的 blog 工具能很简单地实现的开放系统。</td>
</tr>
</table>
</body>
</html>

-----------------------------------------JS脚本:命名:js.js------------------------------------
var number=5; //定义条目数

function LMYC() {
var lbmc;
for (i=1;i<=number;i++) {
lbmc = eval('LM' + i);
lbmc.style.display = 'none';
}
}

function ShowFLT(i) {
lbmc = eval('LM' + i);
if (lbmc.style.display == 'none') {
LMYC();
lbmc.style.display = '';
}
else {
lbmc.style.display = 'none';
}
}

你参照这个做下修改就好了
温馨提示:答案为网友推荐,仅供参考
第1个回答  2011-03-09
首先最简单的就是你的id=“yc”重复了,你可以设置成id=“yc_1” id=“yc_2”
js代码可以写成】
function(x){
document.getElementsById(“di”+x+“”).style.display=block;//使显示的li隐藏掉
}
第2个回答  2011-03-12
<li id="yc">a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li class="r">e</li>
</ul>
<ul>
<li id="yc">f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li class="r">j</li>

<li id="yc">k</li>
<li>l</li>
<li>m</li>
<li>n</li>
<li class="r">o</li>

<li id="yc">p</li>
<li>q</li>
<li>r</li>
<li>s</li>
<li class="r" id="yc">t</li>

<li class="b">u</li>
<li class="b">v</li>
<li class="b">w</li>
<li class="b">x</li>
<li class="b r">y</li>
</ul>
</div>