Jquery JQ切换并保持高亮显示_Jquery_Menu_Toggle

Jquery JQ切换并保持高亮显示

jquery menu

Jquery JQ切换并保持高亮显示,jquery,menu,toggle,Jquery,Menu,Toggle,晚上好。谁能帮个忙吗这里有一个简单的菜单脚本：问题：切换不起作用。单击蓝色Div时，灰色字段应切换我的问题: 1/如何使灰色div切换 2/如何进行设置，以便向用户指示他们刚刚选择的按钮？例如，单击的按钮将保持高亮显示，直到单击另一个按钮谢谢你，Jan编辑-我也运行chrome。在这里，打开记事本并将其另存为.html文件，确保指定utf-8编码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

晚上好。谁能帮个忙吗

这里有一个简单的菜单脚本：

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

我的问题:

1/如何使灰色div切换

2/如何进行设置，以便向用户指示他们刚刚选择的按钮？例如，单击的按钮将保持高亮显示，直到单击另一个按钮

谢谢你，Jan

编辑-我也运行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>

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

@e wagness-谢谢你的光芒。然而，我想找出的是，为什么蓝色区域2和3下的灰色div在单击各自的蓝色区域时不会出现。我在这里找到了脚本：bit.ly/GM2xAB。如果能得到你的建议，那太好了。我明白了，我原本以为你只是想显示/隐藏一个原始可见div，所以我被其他隐藏的div弄糊涂了，以及你为什么要按id选择。现在我明白了。事实上，你所拥有的应该可以很好地工作，在左上角的“选择框架”下，将其从“有载”更改为“无包裹头部或身体”，它应该可以正常工作fine@e摇摆-谢谢你，但是啊，该死，没有运气。我不知道如何进行，但我会调查的。詹妮弗：你确定吗？我只是仔细检查了一下，确保您选择了“无包裹头”，然后单击“当然运行”，否则实际上什么都没有changed@jan我只是将它保存为一个原始html文件，并在本地运行，它也可以工作