怎么通过动态修改id的值改变div的显示隐藏?

function changeBody(thisObj,Num){   
    if (thisObj.className == "on") return;
 var tabList = document.getElementById("myTab3").getElementsByTagName("li");
 alert(tabList);
 
  for (i = 0; i < tabList.length; i++) {//点击之后，其他tab变成灰色，内容隐藏，只有点击的tab和内容有属性
          if (i == Num) {
              thisObj.className = "on";
              document.getElementById("iDBody" + i).style.display = "block";
//if(i==1) thisObj.style.background='{$them_parth}images/list4-2.gif';
          } else {
              tabList[i].className = "out";
              document.getElementById("iDBody" + i).style.display = "none";
//if(i==1) thisObj.style.background='none';
          }

    }    
    这段代码为什么不行???

解决方案 »

  1.   


    <!--门店幻灯 -->
    <div class="example">
    <div class="JQ-slide">

    <ul class="JQ-slide-content">
    <li><a>
    <img
    src="{if $v.thumb eq ''}{$them_parth}images/error.png{else}{$v.thumb}{/if}"
    width="200" height="100" /> 
    </a></li>
    <li> <a>
    <img
    src="{if $v.thumb eq ''}{$them_parth}images/error.png{else}{$v.thumb}{/if}"
    width="200" height="100" /> 
    </a>
    </li> </ul>

    <ul class="JQ-slide-nav"   id="myTab3">
    <li class="on" onmouseover="changeBody(this,0);">1</li>
    <li class="out" onmouseover="changeBody(this,1);">2</li>

    </ul>

    </div>
    <div>
    </div>

    <div id="myTab2">
    <div  id="iDBody0">
      {foreach from=$fendian item=v}
    <span>{$v.title}</span><a
    href="{$v.url}"><font>[查看]</font></a>
    <p>{$v.description}</p> <!--  </div> -->
    {/foreach}
    <!--  </div> -->
    </div>
    </div>
    </div>

    <!--门店幻灯 -->
      

  2.   

    发个js代码，其它上下文靠猜，真是费劲。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>test</title>
        <style type="text/css"></style>
    </head>
    <body>
    <ul id="myTab3">
        <li onclick="changeBody('iDBody0', 0)">11</li>
        <li onclick="changeBody('iDBody1', 1)">11</li>
        <li onclick="changeBody('iDBody2', 2)">11</li>
    </ul>
    <div id="iDBody0">aaa</div>
    <div id="iDBody1" style="display:none;">bbb</div>
    <div id="iDBody2" style="display:none;">ccc</div>
    <script type="text/javascript">
        function changeBody(thisObj, Num) {
            thisObj = document.getElementById(thisObj);
            var tabList = document.getElementById("myTab3").getElementsByTagName("li");        for (var i = 0; i < tabList.length; i++) {//点击之后，其他tab变成灰色，内容隐藏，只有点击的tab和内容有属性
                var dbody = document.getElementById("iDBody" + i);
                if (i == Num) {
                    thisObj.className = "on";
                    dbody.style.display = "block";
                } else {
                    dbody.style.display = "none";
                    dbody.className = 'out';
                }
            }
        }
    </script>
    </body>
    </html>
      

  3.   

    JS没有问题，应该是你迭代的问题
      {foreach from=$fendian item=v key=key}
    <div  id="iDBody{$key}">
    <span>{$v.title}</span><a
    href="{$v.url}"><font>[查看]</font></a>
    <p>{$v.description}</p></div>
    {/foreach}