Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выпадающий текст при нажатии на ссылку (https://javascript.ru/forum/dom-window/58209-vypadayushhijj-tekst-pri-nazhatii-na-ssylku.html)

wisewarrior 09.09.2015 15:41

Выпадающий текст при нажатии на ссылку
 
Доброй день уважаемые форумчане.
Подскажите как доделать java скрипт:
  1. Что бы он первую ссылку открывал при открытии страницы (следующие ссылки нужно нажимать уже самому, при нажатии на некст ссылку, первая ссылка закрывается)
  2. Присваивал div блоку ссылки class="active"

Собственно сам скрипт:
var show;
function hidetxt(type){
 param=document.getElementById(type);
 if(param.style.display == "none") {
 if(show) show.style.display = "none";
 param.style.display = "block";
 show = param;
 }else param.style.display = "none"
}


<div class="usercabinet_block infopage">
<div class="cabinet_content">
<div class="infoHorblock_container">
<div class="infoHorblock_navigation clear_after">
<div class=""><a onclick="hidetxt('div1'); return false;" href="#" rel="nofollow">Ссылка 1</a></div>
<div class=""><a onclick="hidetxt('div2'); return false;" href="#" rel="nofollow">Ссылка 2</a></div>
<div class=""><a onclick="hidetxt('div3'); return false;" href="#" rel="nofollow">Ссылка 3</a></div>
</div>
<div class="infoHorblock_text clear_after" style="height: 81px;">
<div class="" style="display:none;" id="div1">
<p><strong>Заголовок 1</strong></p>
<p>Много много много текста 1</p>
</div>
<div class="" style="display:none;" id="div2">
<p><strong>Заголовок 2</strong></p>
<p>Много много много текста 2</p>
</div>
<div class="" style="display:none;" id="div3">
<p><strong>Заголовок 3</strong></p>
<p>Много много много текста 3</p>
</div>
</div>
</div>
</div>
</div>


Пример как хочу сделать: http://www.moyo.ua/consumers.html ( Не реклама)

Код частично взят с того же сайта и найден на просторах интернета.
А вот сам Java скрипт выдернуть не смог, точнее файл нашел, но найти там что либо не удалось:)

Не судите строго, знаний маловато, приблизительно я что-то понял:
Куда то нужно добавить это:
$('#myTabs a:first').tab('show')


и так же куда то добавить это:
$this.closest('div').children('a').removeClass('active');
$this.parent().addClass('active');


Но вот как это все воплотить в жизнь я еще не понимаю.
Буду очень благодарен за любую помощь:)

krasovsky 10.09.2015 09:25

Ну для начала это не java а javascript
Во вторых не проще ли сразу отдавать страницу не указывая первому блоку display:none ?
В третьих в твоем случае лучше использовать классы а не id.
Алгоритм:
кликаем по классу - собираем все элементы с этим классом - устанавливаем всем display:none(или навешиваем некий класс скрывающий элемент через css) - устанавливаем кликнутому элементу diplay:block(или навешиваем некий класс)

Домашнее задание: написать код самостоятельно


Часовой пояс GMT +3, время: 17:07.