Jump to content
Sign in to follow this  
Wisewarrior

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

Recommended Posts

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.