Забыли пароль?
Запросите новый здесь.

Автор темы: Markant
ID темы: 2023
Информация:
Тема содержит 8 сообщения, была просмотрена 3658 раз.  Имеются прикрепленные файлы.
Просмотр темы
PHP-Fusion Russia » Веб-разработка » HTML и CSS
 Распечатать тему
Тег select, применимо к конкретной ситуации
Markant
Здравствуйте!

Имею в наличии спортивный сайт, где нужно отображать с помощью селекта несколько турнирных таблиц (не более 2-3)

Подскажите, как это сделать.

Для примера - http://fc-zenit.ru/main/ (см. аттач)
Markant присоединено следующее:изображение:
primer_select.jpg
 
dark
На указанном сайте это сделано не только select'ом, но и java-script'ом.
Ну а как реализовать - можно просто посмотреть в коде с указанного сайта.
 
Markant
dark написал:

На указанном сайте это сделано не только select'ом, но и java-script'ом.
Ну а как реализовать - можно просто посмотреть в коде с указанного сайта.


Некорректно поставил вопрос, согласен. Именно скрипт и интересен.
 
Rush
ctrl+u епт

Объединено 10.01.2014 18:00:
банальные табы, только с управление из селекта

Объединено 10.01.2014 18:06:
Скачать исходники  Код


<select id="select">
    <option name="tab1">tab1</option>
    ....
</select>
<div id="tabs">
    <div data-tab="tab1" style="display:none;">content</div>
    .....
</div>

<script>
    $(document).ready(function(){
      $('#select').on('change',function(e){
             e.preventDefault();
             var tab = $('#tabs').find('div[data-tab='+$(this).val()+']');
             if (tab.length) {
                  $('#tabs').find('div').css('display','none');
                  $('#tabs').find('div[data-tab='+$(this).val()+']).css('display','block');
             } else console.log('error');
       });
   });
</script>




Изменил(а) Rush, 10.01.2014 16:06
x1
 
Web
Markant
Rush, спасибо большое, буду пробовать!!!
 
Polarfox
Оффтопик Rush, console закреплена в js для всех браузеров?

Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме

PolarLab - вход для подопытных
 
Web
Markant
Markant написал:

Rush, спасибо большое, буду пробовать!!!


Не выходит. Одну ошибку Dreamviewer нашел в синтаксисе, я поправил. но все равно увы(

Объединено 14.01.2014 18:00:
Скачать исходники  Код
<select id="select">
<option name="tab1">Кубок Кировска</option>
<option name="tab2">Чемпионат района</option>
</select>

<div id="tabs">
    <div data-tab="tabs1" style="display:none;">1</div>
    <div data-tab="tabs2" style="display:none;">2</div>
</div>

<script>
    $(document).ready(function(){
      $('#select').on('change',function(e){
             e.preventDefault();
             var tab = $('#tabs').find('div[data-tab='+$(this).val()+']');
             if (tab.length) {
                  $('#tabs').find('div').css('display','none');
                  $('#tabs').find('div[data-tab='+$(this).val()+']').css('display','block');
             } else console.log('error');
       });
   });
</script>




Где ошибка? Может jquery какие то особенные подключать надо?
Изменил(а) Markant, 14.01.2014 18:02
 
spiker
:) у "option" не может быть "name". "Погоняло" назначается SELECT'у

Вот как надо
Скачать исходники  Код
<select id="select" name="name">
<option>--выбрать--</option>
<option value="tabs1">Кубок Кировска</option>
<option value="tabs2">Чемпионат района</option>
</select>


 

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум:
Похожие темы
Топ 5 пользователей форума
Alex Alex (1,237)   Zaxap Zaxap (1,090)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)