JQ Toggle and STAY突出顯示

晚上好。任何人都可以請伸出援手嗎？JQ Toggle and STAY突出顯示

用一個簡單的菜單腳本這裏掙扎：http://jsfiddle.net/GrP9D/

問題：切換不起作用。點擊藍色Div後，灰色字段應該切換。

我的問題：

1 /我能做些什麼使灰格切換？

2 /可以做些什麼來設置，它會告訴用戶他們剛選擇了哪個按鈕？比如點擊按鈕保持高亮顯示，直到點擊另一個按鈕。

謝謝，1月

來源

2012-03-23 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>

如果不工作，則可能是你的電腦出了問題，因爲這種精確副本對我的作品，在本地運行。

來源

2012-03-23 17:39:09

@e wagness - 感謝您的光芒。但是，我試圖找到的是，爲什麼藍色字段2和3下的灰色div不會在單擊其各自的藍色字段時出現。我在這裏找到了腳本：bit.ly/GM2xAB。有很好的建議。 – Jan 2012-03-24 10:25:02

我明白了，我原本以爲你只是試圖顯示/隱藏一個原始的可見div，所以我被其他隱藏的div弄糊塗了，你爲什麼選擇id。現在我明白了。其實，你有什麼應該可以正常工作，在「選擇框架」下的左上角將其從「裝載」改爲「無包裝（頭）」或（身體），它應該工作得很好 – 2012-03-26 18:14:12

@e wagness - 謝謝，但是，該死的，沒有運氣。我不知道如何繼續，但我會調查。 jan – Jan 2012-03-27 08:17:15

JQ Toggle and STAY突出顯示

回答

相關問題