Перейти к содержанию
Wisewarrior

Выпадающий текст при нажатии на ссылку

Рекомендуемые сообщения

Доброй ночи уважаемые форумчане.

Подскажите как доделать 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"
}

Далее html & css

<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>
.usercabinet_block {
    display: table;
    width: 100%;
}
.usercabinet_block .cabinet_content {
    display: table-cell;
    vertical-align: top;
}
.infopage .infoHorblock_container {
    padding-bottom: 35px;
    margin-bottom: 35px;
    border-bottom: 1px solid #eaecef;
}
.infopage .infoHorblock_navigation {
    margin-bottom: 15px;
    ;
}
.infopage .infoHorblock_navigation>div.active, .infopage .infoHorblock_navigation>div:hover {
    color: #34495e;
    background: #d7ebf7;
}
.infopage .infoHorblock_navigation>div.active:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -6px;
    left: 50%;
    ;
    width: 0;
    height: 0;
    border-top: 6px solid #d7ebf7;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
.infopage .infoHorblock_navigation>div {
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    padding: 0 10px;
    color: #009fff;
    position: relative;
    transition: all .1s linear;
    cursor: pointer;
}
.clear_after:after {
    content: '';
    display: block;
    clear: both;
}
.infopage .infoHorblock_text {
    position: relative;
    height: 0;
    transition: height .2s linear;
    overflow: hidden;
}
.infopage .infoHorblock_text>div {
    font-size: 15px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .2s linear;
}
.infopage .infoHorblock_text>div.active {
    opacity: 1;
    z-index: 2;
}
.infopage .infoHorblock_container:not(.text) p:first-child {
    margin-top: 0;
}
.infopage .infoHorblock_container:not(.text) p {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 0;
    margin-top: 15px;
}

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

 

Как частично взят с того же сайта и найден на просторах интернета.

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Доброй ночи уважаемые форумчане.

Подскажите как доделать 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"
}

Далее html & css

<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>
.usercabinet_block {
    display: table;
    width: 100%;
}
.usercabinet_block .cabinet_content {
    display: table-cell;
    vertical-align: top;
}
.infopage .infoHorblock_container {
    padding-bottom: 35px;
    margin-bottom: 35px;
    border-bottom: 1px solid #eaecef;
}
.infopage .infoHorblock_navigation {
    margin-bottom: 15px;
    ;
}
.infopage .infoHorblock_navigation>div.active, .infopage .infoHorblock_navigation>div:hover {
    color: #34495e;
    background: #d7ebf7;
}
.infopage .infoHorblock_navigation>div.active:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -6px;
    left: 50%;
    ;
    width: 0;
    height: 0;
    border-top: 6px solid #d7ebf7;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
.infopage .infoHorblock_navigation>div {
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    padding: 0 10px;
    color: #009fff;
    position: relative;
    transition: all .1s linear;
    cursor: pointer;
}
.clear_after:after {
    content: '';
    display: block;
    clear: both;
}
.infopage .infoHorblock_text {
    position: relative;
    height: 0;
    transition: height .2s linear;
    overflow: hidden;
}
.infopage .infoHorblock_text>div {
    font-size: 15px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .2s linear;
}
.infopage .infoHorblock_text>div.active {
    opacity: 1;
    z-index: 2;
}
.infopage .infoHorblock_container:not(.text) p:first-child {
    margin-top: 0;
}
.infopage .infoHorblock_container:not(.text) p {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 0;
    margin-top: 15px;
}

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

 

Как частично взят с того же сайта и найден на просторах интернета.

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

Документация, есть документация http://getbootstrap.com/javascript/#tabs

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Документация то есть, но нужны еще и мозги:D

Что бы открывало первую ссылку автоматом, то нужно $('#myTabs a:first').tab('show') - я так рискнул предположить, только вот куда и как его вставлять:)

А вот что бы присваивало класс active ничего не увидел:)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Я так понимаю что бы присвоить класс active нужно, что-то типа такого:

$(function() {
         $("#selectBackground ul li a").click(function() {
             $("#selectBackground ul li a").removeClass("active");         
             $(this).toggleClass("active");
         })
    });

Но как его добавить в мой скрипт?)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.