Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Замена содержимого по нажатию

Обсуждение темы Замена содержимого по нажатию в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Здравствуйте гуру скриптописания =) У меня есть одна проблем которую я не могу решить. Для вас она конечно пустяковая. Нарыл в интернете всяческие ...


Закрытая тема
 
Опции темы
Старый 15.04.2013, 12:18   #1
Здравствуйте гуру скриптописания =)
У меня есть одна проблем которую я не могу решить. Для вас она конечно пустяковая.
Нарыл в интернете всяческие jquery плагины и вот мне понравилась идея реализации отоброжения содержимого по средствам вертикальных табов.
Но по скольку изменять пока что получается лишь малую часть решил обратится к вам.
В общем что я хочу сделать: допустим есть табличка из 2 столбцов. В левом менюшка, в правом содержимое. Хотелось бы сделать так что бы при нажатии на один из пунктов в меню не нужно было идти на аналогичную страницу с другим содержимым а что бы содержимое 2 столбца просто заменялось.
Ранее делал подобнее с помощью выборки из базы данных, но не особо силен в пхп, и таким образом получается делать в левом столбце простое текстовое меню, но хочется же что б было красяво =)

Есть примерное понятие как это сделать... допустим в меню 5 кнопок, делается 5 дивов со скрытым содержимым, и к кнопкам привязывется onClick="Show('div'), но есть проблема. При открытии страницы должен быть отоброжен первый див, то в таком случае у меня получается что он открыт постоянно, как сделать так что бы при открытии нового дива старые сворачивались?

П.С.: извеняюсь за выкладку своей мысли, ну тут уж такая у меня проблема не могу я локанично сформулировать что нужно =(

Добавлено через 1 минуту

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

Добавлено через 1 час 7 минут

Почти получилось реализовать:
Код:
<script>
var toggle = function() {

    var currentDiv = null;

    function open(divElement) {
        // Тут можно добавить эффект "плавного" открытия:
        divElement.style.display = "block";
        currentDiv = divElement;
    }

    function close(divElement) {
        divElement.style.display = "none";
        currentDiv = null;
    }

    return function(divID) {
var divElement = document.getElementById(divID);
if (divElement) {
    if (divElement === currentDiv) {
        close(currentDiv);
    } else if(currentDiv != null) {
        close(currentDiv);
        open(divElement);
    } else open(divElement);
}
    }
  }();
</script>
Код:
<table width="850" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">
    <a href="javascript://" onClick="toggle('div1');return false;">Блок 1</a>
    <br>
<a href="javascript://" onClick="toggle('div2');return false;">Блок 2</a>
</td>
    <td><div id="div1" style="display:none;">Блок 1</div>
<br />


<div id="div2" style="display:none;">Блок 2</div></td>
  </tr>
</table>
Блоки открываются и закрываются если нажать на другую ссылку, но вот проблема как это можно изменить что бы при открытии страницы первый див был открыт, а при нажатии на второй - закрывался?

Еще знаю есть как то возможность сделать плавное открытие раскрытие, как то можно воплотить?

Последний раз редактировалось web_smile; 15.04.2013 в 12:18.. Причина: Добавлено сообщение
 
Старый 15.04.2013, 12:18
Ссылки
Старый 15.04.2013, 12:27   #2
$('.element').click(function(){
$('.curent-tab').toggleClass('active')
})

то есть. вы изначально скрываете все блоки с содержимым либо css (display:none) либо скриптом (.hide). А кода кликаете по-табу, то соответствующий блок получает класс active, который имеет display:block. У остальных блоков этот класс убираете
 
Старый 15.04.2013, 13:34   #3
Цитата:
Сообщение от vladendark Посмотреть сообщение
$('.element').click(function(){
$('.curent-tab').toggleClass('active')
})

то есть. вы изначально скрываете все блоки с содержимым либо css (display:none) либо скриптом (.hide). А кода кликаете по-табу, то соответствующий блок получает класс active, который имеет display:block. У остальных блоков этот класс убираете
Ничего не понял =(
Есть скажем 2 блока с разным содержимым, назовем их блок1 и блок2
Есть 2 кнопки: кнопка1 и кнопка2
Что нужно сделать:
Что бы при открытии страницы отображалось содержимое блок1
Но при нажатии на кнопка2, содержимое блок1 заменялось на содержимое блок2
И так же при обратном нажатии на кнопка1, содержимое блок2 заменяется на содержимое блок1

Все это получилось реализовать, кроме того что бы содержимое блок1 отоброжалось при открытии страницы. Если Блоку1 присвоить значние дисплей:шоу, то при нажатии на кнопка2 Блок1 не пропадает =(

Добавлено через 50 минут

В общем у меня получилось правда как то не очень удобная реализация:
Код:
<script>
function Show(id)
{
    el = document.getElementById(id);
    if (el.style.display=="none")
        el.style.display="block";
    else
        el.style.display="block";
}
function Hide(id)
{
    el = document.getElementById(id);
    if (el.style.display=="block")
        el.style.display="none";
    else
        el.style.display="none";
}

</script>
Код:
<table width="850" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">
<button onClick="Show('1div'); Hide('2div'); Hide('3div');">Отобразить Блок1</button>
<br />
<button onClick="Show('2div'); Hide('1div'); Hide('3div');">Отобразить Блок2</button>
<br />
<button onClick="Show('3div'); Hide('1div'); Hide('2div');">Отобразить Блок3</button>
    </td>
    <td valign="top">
<div id="1div" style="display:show;">
Блок1<br />
Блок1<br />
Блок1<br />
Блок1<br />
Блок1<br />
</div>

<div id="2div" style="display:none;">
Блок2<br />
Блок2<br />
Блок2<br />
Блок2<br />
Блок2<br />
</div>

<div id="3div" style="display:none;">
Блок3<br />
Блок3<br />
Блок3<br />
Блок3<br />
Блок3<br />
</div>
    </td>
  </tr>
</table>
Может можно как то упростить?

Последний раз редактировалось web_smile; 15.04.2013 в 13:34.. Причина: Добавлено сообщение
 
Старый 15.04.2013, 14:00   #4
http://jsfiddle.net/rR5J4/ изучайте.
К своему стыду я не силен в native JS, поэтому заюзал jqery
 
Старый 15.04.2013, 14:00
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
фильтры css на часть содержимого катка HTML, CSS, JavaScript 3 10.05.2011 09:26
Копирование текста в буфер по нажатию на кнопку battrack HTML, CSS, JavaScript 1 09.03.2010 13:40
изменить размер объекта по нажатию кнопки din Технологии Flash 0 24.04.2007 15:43
Чтение содержимого русскоязычных папок Shtrenyov ASP, Perl, PHP и MySQL 5 29.05.2006 20:02
Проблема с центрированием замещаемого содержимого ЗАБАВА HTML, CSS, JavaScript 5 02.10.2003 16:53


Текущее время: 03:25. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум