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

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

ArtemPitov · 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");
         })
    });

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

Войти

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

Рекомендованные сообещёния

Wisewarrior

Ссылка на комменирий

Погделиться на других сайих

ArtemPitov

Ссылка на комменирий

Погделиться на других сайих

Wisewarrior

Ссылка на комменирий

Погделиться на других сайих

Wisewarrior

Ссылка на комменирий

Погделиться на других сайих

Создайте аккаунт или войдите в него для комментирования

Создать аккаунт

Войти

Похожие публикации

В выпадаюещём списке только 5 первых категорий. Помогите, Плиз!

при редактировании главной страниэто выпадает сообещёние

Текст заключенный в кавычки

Как изменить текст кнопки купить после добавления в корзину

SeoPro в ocStore и ссылки с html

Сейчас на страниэто 0 пользователей

Покупателям

Разрилитликам

Полезная информация

Последние дополнения

Разгдел покупок

ocStore

Шаблоны

OpenCart.Pro

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