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

Wisewarrior · 8 вересня 2015

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

Подскажите как доделать 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 скрипт выдернуть не смог, точнее файл нашел, но найти там что либо не удалось:)

SyntaxCode · 8 вересня 2015

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

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

Wisewarrior · 8 вересня 2015

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

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

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

Wisewarrior · 9 вересня 2015

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

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

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

Вхід

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

Recommended Posts

Wisewarrior

Надіслати

Поділитися на інших сайтах

SyntaxCode

Надіслати

Поділитися на інших сайтах

Wisewarrior

Надіслати

Поділитися на інших сайтах

Wisewarrior

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Ваші замовлення

ocStore

Шаблони

Important Information