Как сделать два деления, чтобы отображался только один, и их можно было поменять местами в реальном времени? - PullRequest
Новая
       1

Как сделать два деления, чтобы отображался только один, и их можно было поменять местами в реальном времени?

0 голосов
/ 15 июля 2011

Я пытаюсь что-то подобное, но, похоже, это не работает.

JS: 

<script type="text/javascript">
   function recent() {
    document.getElementById('top').style.display = "none";
    document.getElementById('recent').style.display = "block";
    alert('Recent');
   }
   function top() {
    alert('Top');
    document.getElementById('recent').style.display = "none";
    document.getElementById('top').style.display = "block";
   }
  </script>

HTML: 

  <div id="content">
   <div id="header"><a href="#" onClick="javascript:recent();">Recent</a> | <a href="#" onClick="javascript:top();">Top rated</a></div>
   <div id="top">
    <p>TOP Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
   <div id="recent">
    <p>RECENT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
  </div>

CSS: , 

#top {display:none}

Любая помощь будет принята с благодарностью.

EDIT

Я попробовал это в Firefox, работает нормально. Новый вопрос Почему не работает в опере?

Ответы [ 8 ]

1 голос
/ 15 июля 2011

Рабочая демоверсия: http://jsfiddle.net/hFUhA/

Некоторые баллы ...

recent = function(){} - лучшая конструкция для функций, поскольку она позволяет вам явно определить область действия функции

хорошо бы возвращать false при событиях щелчка, чтобы предотвратить поведение по умолчанию: onClick="top(); return false;"

и javascript: не нужны в onClick, только в href (и не рекомендуется для выполнения javascript в большинстве случаев)

0 голосов
/ 16 июля 2011

После небольшого тестирования я узнал, что «top» действует как зарезервированное слово.Несмотря на то, что я не могу найти какой-либо согласованной документации по этому вопросу, изменение имени функции «top» на «show_top» устраняет проблему.

Протестировано в Mozilla Firefox 5.0, IE9, Opera 11.50 иChromium (Google Chrome) 12.0.742.112

Обратите внимание, что даже без этой модификации он работал в Mozilla Firefox и Chromium.

Обновление: по-прежнему плохая замена документации, но я нашел одну страницуэто дает некоторое объяснение "top": http://www.dotnetspider.com/forum/179582-top-javascript.aspx

Обновление № 2: Эврика!Это действительно меня беспокоило, поэтому я нашел документацию ...

От Dottoro.com, объект окна:

Члены текущего окнадоступ напрямую, без использования объекта окна в качестве префикса (например, вы можете использовать документ вместо window.document), кроме того, глобальные переменные и объекты также доступны через объект окна (var x = 2; alert (window.x);).

Dottoro.com, top property

0 голосов
/ 15 июля 2011

Следующий код работает на Firefox: 

<html>
<head>
<script type="text/javascript">
   function recent() {
    document.getElementById('top').style.display = "none";
    document.getElementById('recent').style.display = "block";
   }
   function top() {
    document.getElementById('recent').style.display = "none";
    document.getElementById('top').style.display = "block";
   }
  </script>
</head>
<body>
 <div id="content">
   <div id="header"><a href="#" onclick="recent();return false;">Recent</a> | <a href="#" onclick="top();return false;">Top rated</a></div>
   <div id="top">
    <p>TOP Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
   <div id="recent">
    <p>RECENT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
  </div>

</body>
</html>
0 голосов
/ 15 июля 2011

Я думаю, что ваш «onClick» должен быть в нижнем регистре: «onclick». Кстати, вы должны добавить return false в ваш код: 

<a href="#" onclick="recent();return false;">Recent</a>
0 голосов
/ 15 июля 2011

ну, я не вижу проблемы в коде.в чем именно проблема?:Что оба div показаны изначально?Если это так, просто добавьте встроенный стиль к элементу #top с помощью "style = 'display: none'" (чтобы быть уверенным, что при запуске отображается только один ... хотя вы сказали, что это установлено в css ..)

0 голосов
/ 15 июля 2011

javascript: это ваша проблема.Это неверный синтаксис для атрибута onclick.Это то, что люди использовали, когда вставляли JavaScript в атрибут href.Удалите это, и оно должно работать.

0 голосов
/ 15 июля 2011

Если вы уже достаточно рано определили функции recent и top в своем скрипте, это должно работать.

Это нормально работает на JSFiddle (но проверьтезначения для настроек слева).

0 голосов
/ 15 июля 2011

Попробуйте использовать консоль ошибок.

Ошибка - часть "javascript:" в обработчике onClick.все внутри onClick уже является javascript.

Также я бы предложил использовать jQuery, который позволяет вам использовать такие красивые операторы, как 

$('#recent').show();
$('#top').hide();

Неплохая идея начать с необработанного javascriptдля учебных целей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...