Question

晚上好。有人可以帮忙吗？

在这里使用简单的菜单脚本挣扎：http://jsfiddle.net/GrP9D/

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

我的问题：

1 /我可以做什么来进行灰色div切换？

2 /可以采取哪些措施来向用户表明他们刚刚选择了哪个按钮？例如，单击的按钮保持突出显示，直到单击另一个按钮。

谢谢你，Jan

Answer 1

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

如果这不起作用，可能是您的计算机出现问题，因为这个精确的副本适用于我，在本地运行。

JQ Toggle和STAY突出显示

1 个答案: