JQ Toggle и STAY выделены - PullRequest
Новая
       22

JQ Toggle и STAY выделены

0 голосов
/ 23 марта 2012

Добрый вечер.Кто-нибудь может помочь, пожалуйста?

Борьба с простым скриптом меню здесь: http://jsfiddle.net/GrP9D/

Проблема: переключение не работает.При нажатии на синие Div, серое поле должно переключаться.

Мой вопрос:

1 / Что можно сделать, чтобы переключить серый div?

2 / Что можно сделать, чтобы настроить устройство, которое указывало бы пользователю, какую кнопку он только что выбрал?Например, нажатая кнопка остается выделенной, пока не будет нажата другая.

Спасибо, Ян

1 Ответ

0 голосов
/ 23 марта 2012

редактировать - я также запускаю 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>
​

Если это не сработает, это может быть проблема с вашим компьютером, потому что эта точная копия работает для меня, запускается локально.

...