突出显示JQ Toggle和STAY

晚上好。有人能伸出援手吗？

在这里与一个简单的菜单脚本作斗争：http://jsfiddle.net/GrP9D/

问题：切换不起作用。单击蓝色Div时，灰色字段应进行切换。

我的问题：

1/我能做些什么来切换灰色div？

2/如何设置才能向用户指示他们刚刚选择了哪个按钮？例如，单击的按钮保持高亮显示，直到单击另一个按钮为止。

谢谢你，Jan

edit-i也运行chrome。在这里，打开记事本并将其保存为.html文件，确保指定utf-8编码

<!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">
    <link rel="stylesheet" type="text/css" media="all" href="http://www.randomsnippets.com/wp-content/themes/twentyeleven/style.css" />

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone)
{
     $('div[name|="newboxes"]').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
               $(this).parent().children(":first-child").css('background-color','#00FFFF');
          }
          else {
               $(this).hide(600);
               $(this).parent().children(":first-child").css('background-color','#99CCFF');
      }
          }
     });
}</script>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body>
<title>Untitled Document</title>
<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
         </div>
         <div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
         </div>
         <div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
         </div>
         <div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
      </td>
   </tr>
</table>
</body>
</html>

如果这不起作用，你的电脑可能有问题，因为这个副本对我有效，在本地运行。

相关内容

最新更新

热门标签：