我似乎无法通过JavaScript更改类值！

我一直在努力做这无济于事:(从我的研究，有两种方法来改变在JavaScript中陈述类值：我似乎无法通过JavaScript更改类值！

的document.getElementById（V）.setAttribute（属性，值）;

或

的document.getElementById（v）.className =值;

然而，我都尝试和他们正在做下蹲:(昨天我浪费了一整天弄清楚这一点Ø无济于事:(

这里是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
<html> 
    <head> 
    <title>Checklist</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" type="text/css" href="/systems_hr/Style%20Library/globalstyles_test.css"> 
    <style type="text/css"> 
     #innerframe { 
       width: 100%; 
       height: 63em; 
     } 
    </style> 
    <script type="text/javascript" src="/systems_hr/Style%20Library/JavaScripts/styles.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>  
    <script type="text/javascript">  
     /* I'll clean this one up. Didn't want to play nice with styles.js 
     var x = 0; 
     var p = new Array(3) 

     for (x = 1; x < 4; x++) 
     { 
     p[x] = new Image(); 
     p[x].src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-" + x + ".png"; 
     } 
     */ 

     var p0 = new Image(); 
     p0.src = "images/id1.png"; 

     var p1 = new Image(); 
     p1.src = "images/id1-1.png"; 

     var p2 = new Image(); 
     p2.src = "images/id1-2.png"; 

     var p3 = new Image(); 
     p3.src = "images/id1-3.png"; 

     var p4 = new Image(); 
     p4.src = "images/id2.png"; 

     var p5 = new Image(); 
     p5.src = "images/id2-1.png"; 

     var p6 = new Image(); 
     p6.src = "images/id2-2.png"; 

     var p7 = new Image(); 
     p7.src = "images/id2-3.png";  

     var p8 = new Image(); 
     p8.src = "images/id3.png"; 

     var p9 = new Image(); 
     p9.src = "images/id3-1.png"; 

     var p10 = new Image(); 
     p10.src = "images/id3-2.png"; 

     var p11 = new Image(); 
     p11.src = "images/id3-3.png";  

     var p12 = new Image(); 
     p12.src = "images/id4.png"; 

     var p13 = new Image(); 
     p13.src = "images/id4-1.png"; 

     var p14 = new Image(); 
     p14.src = "images/id4-2.png"; 

     var p15 = new Image(); 
     p15.src = "images/id4-3.png"; 

     function changeFrame (frameSRC) 
     { 
     var myFrame = document.getElementById('fraContent'); 
     myFrame.contentWindow.location = frameSRC; 
     } 

     function changeTab(tab) 
     { 
     alert(tab); 
     switch(tab)  
     { 
      case 0:   
      document.getElementById("week1").className = "active"; 
      test('week1'); 
      document.getElementById("month1").className = "active"; 
      test('month1');   
      document.getElementById("day1").className = "current"; 
      test('day1'); 
      case 1: 
      document.getElementById("day1").className = "active"; 
      document.getElementById("month1").className = "active";   
      document.getElementById("week1").className = "current"; 
      case 2: 
      document.getElementById("week1").className = "active"; 
      document.getElementById("day1").className = "active";   
      document.getElementById("month1").className = "current"; 
     } 

     } 

     function test(tab) 
     { 
     alert(document.getElementById.id + " " + document.getElementById(tab).className) 
     } 
    </script> 

    </head> 
    <body> 
    <table border="0" width="100%"> 
    <tr> 
    <td colspan="2" align="left"> 
     <div id="navcontainer"> 
     <ul id="navlist"> 
      <li><a href="#" class="active" id="day1" onclick="changeTab(0);">FIRST DAY</a></li> 
      <li><a href="#" class="active" id="week1" onclick="changeTab(1);test('day1');test('week1');test('month1');">FIRST WEEK</a></li> 
      <li><a href="#" class="active" id="month1" onclick="changeTab(2);">FIRST 30-DAYS</a></li> 
     </ul> 
     </div> 
     <div id="page_viewer"> 
      <table border="0" width="1020px" cellpadding="0" cellspacing="0"> 
      <tr> 
      <td> 
       <img src="images/id1.png" style="border: 0px; width: 1000px; height: 72px;" alt="" usemap="#imgTabMap" name="imgTab"> 
       <map id="imgTabMap" name="imgTabMap"> 
        <area shape="rect" alt="" title="" coords="7,11,166,60" href="" name="area1" onclick="changeFrame('D1.html')"> 
        <area shape="rect" alt="" title="" coords="206,10,365,59" href="" target="_self" onMouseOver="changeImageSrc('imgTab','p1')" onMouseOut="changeImageSrc('imgTab','p0')" name="area2" onclick="changeFrame('D2.html')"> 
        <area shape="rect" alt="" title="" coords="405,11,566,59" href="" target="_self" onMouseOver="changeImageSrc('imgTab','p2')" onMouseOut="changeImageSrc('imgTab','p0')" name="area3" onclick="changeFrame('D3.html')"> 
        <area shape="rect" alt="" title="" coords="605,10,763,60" href="" target="_self" onMouseOver="changeImageSrc('imgTab','p3')" onMouseOut="changeImageSrc('imgTab','p0')" name="area4" onclick="changeFrame('D4.html')"> 
        <area shape="rect" alt="" title="" coords="805,9,963,60" href="" target="_self" onMouseOver="changeImageSrc('imgTab','p4')" onMouseOut="changeImageSrc('imgTab','p0')" name="area5"> 
        <!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --> 
       </map> 

      </td> 
      </tr> 
      <tr> 
      <td width="100%"> 
       <iframe name="fraContent" id="innerframe" src="D1.html" frameborder="0" scrolling="no" width="1000px"></iframe> 
      </td> 
      </tr> 
      </table> 
     </div> 
     </td> 
    </tr> 
    </table> 
    </body> 
</html>

我知道有很多粗糙各地最边缘的代码，但我赶时间，我没那么好精通JavaScript语法。

这里是我的代码和我想要实现的细节：

我使用一个全局CSS代码的网站，所以我的大部分声明都存储在那里。我已经在内部制作了JavaScript代码（可以这么说）。不过，如果这能起作用，我打算将其添加到我的站点的全局JavaScript存储库（styles.js之一）。我添加了jQuery的每一个使用它的意图后来（我还没有，因为我现在只是想学习它）。

好吧，现在从你看到的，这一点代码只是一个选项卡式界面。以下是我的选项卡的CSS代码：

/* CSS Tabs */ 
#navlist { 
     padding: 3px 0; 
     margin-left: 0; 
     border-bottom: 1px solid #778; 
     font: bold 12px Verdana, sans-serif; 
} 

#navlist li { 
     list-style: none; 
     margin: 0; 
     display: inline; 
} 

#navlist li a.active { 
     padding: 3px 0.5em; 
     margin-left: 3px; 
     border: 1px solid #778; 
     border-bottom: none; 
     background: #DDE; 
     text-decoration: none; 
} 

#navlist li a:link { color: #448; } 
#navlist li a:visited { color: #448; } 

#navlist li a.active:hover { 
     color: #000; 
     background: #AAE; 
     border-color: #227; 
} 

#navlist li a.current { 
     padding: 3px 0.5em; 
     margin-left: 3px; 
     border: 1px solid #778; 
     border-bottom: 1px solid white; 
     text-decoration: none; 
     background: white; 
     cursor: text; 
} 

#navlist li a.current:hover { 
     background: white; 
     border-bottom: 1px solid white; 
     cursor: text; 
     color: #448; 
} 

#navlist div #content { 
     font-size: 1em; 
}

这些选项卡应该可以在点击时更改iframe的内容。有问题的JavaScript代码的工作就是简单地改变点击标签的外观。在上面的CSS代码中，这是名为“current”的类，而默认样式是“active”类。

应该处理更改的代码是changeTab（tab）。首先，我已将所有选项卡设置为默认的“活动”类。当我点击这个标签时，changeTab应该是踢（也onLoad，但我没有先添加）。这就是我遇到问题的地方。目标标签上的类值不会更改。

首先，我添加了一些catch代码，以查看onClick事件是否正在运行（我之所以在changeTab函数中添加警报代码）。然后，我添加了一个代码，让我看到类属性的最终值（测试（选项卡）函数）。它应该显示标签的ID和它的类属性的值。

当我试用它时，我确实在changeTab中获得了传递的参数，这告诉我onClick正在运行。但测试告诉我标签是未定义的。因此，无论我点击哪个标签，“当前”类都应用于最后一个标签（“月1”）。

我的工作浏览器是IE8，由于这是一家公司的Intranet网站，因此我不需要它与其他浏览器兼容，因为我们公司希望我们将IE专门用于与工作相关的任务。

请帮助:(还有，如果你能推荐替代我在做什么，请随时给他们:)

非常感谢，

POCH

来源

2011-05-27 Poch

您已经忘了break;在您的情况：

case 0: 
    ... 
    break; 
case 1: 
    ... 
    break; 
...

来源

2011-05-27 00:54:52

@ c-smile：谢谢!!!这就是诀窍！我仍然熟悉JavaScript语法，并且没有经过正式的培训，我正在“学习如何工作”模式：D是否有与我正在做的事情相当的jQuery？ jQuery听起来似乎更容易使用。 – Poch 2011-05-27 01:00:57

有几种方法可以用jQuery解决这个问题，更不用说jQueryUI选项卡了......当这些人忙着回答时，我在这里演示了一个演示jQuery方法的小提琴：http://jsfiddle.net/jYjRN/6/ – 2011-05-27 01:21:51

c-smile是正确的所有你需要的是把你的休息切换 – Necrower 2011-05-27 01:27:08

我通过使用jQuery了这么久，现在，我已经忘记了残废，但尽量setAt调用之前的removeAttribute贡。

来源

2011-05-27 00:56:35 JeffSahol

嗯，就像在放入新东西之前先清理板岩一样？将试试:)谢谢你的提示！：d – Poch 2011-05-27 09:22:07

我似乎无法通过JavaScript更改类值！

回答

相关问题