Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Как сделать такой эффект

Как сделать такой эффект


     15.05.2014    Все вопросы » jQuery    1952

вопрос
ну вот такой переход виджетов
Как сделать такой эффект

Как сделать такой эффект

Ответил: VooDoo


Это же табы. Нет?

4 комментария

dimavdv
Юзер

dimavdv - 15 мая 2014 19:42 -

HTML
<div class="tabs">
    
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Вконтакте</label>
      
       <div class="content">
           <p>код вконтакте</p>
       </div>
   </div>
    
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Твиттер</label>
      
       <div class="content">
           <p>код твиттера</p>
          
          
       </div>
   </div>
     
</div>



CSS

.tabs {
  position: relative;
  min-height: 200px;
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  margin-left: -1px;
  position: relative;
  left: 1px;
}
.tab [type=radio] {
  display: none;
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

cucer96
Юзер

cucer96 - 15 мая 2014 20:02 -


спасибо большое помогло а можыте посмотреть вот ещё на эти они у меня не работают и не получается вкл.
скрин выше
и вот код fullstory
<div class="single-product">
<div class="title">
<div class="title-info">
<span class="presence">Добавил {author}, {date=d.m.y}</span>
<span class="delivery">Просмотров:{views}</span>
</div>
<div class="post-title">{title} {favorites} [edit]<img src="{THEME}/dleimages/editstore.png" alt="Редактировать" />[/edit]</div>
<div class="spacer"></div>
<div class="short-info">
<div class="short-description">
<div  class="table">
<ul class="table">

<li><b>Дата выхода: </b>[xfvalue_year]</li>

<li class="odd"><b>Жанр: </b>[xfvalue_janre]</li>

<li><b>Качество: </b>[xfvalue_quality]</li>

<li class="odd"><b>Выпущено в: </b>[xfvalue_issued]</li>

<li><b>Продолжительность: </b>[xfvalue_time]</li>

<li class="odd"><b>Озвучивание : </b>[xfvalue_postproduction]</li>

<li><b>Режисер: </b>[xfvalue_director]</li>

<li class="odd"><b>В ролях: </b>[xfvalue_cast]</li><br>

<div class="title-info"><span class="presence">{link-category}    </span></div>
</ul>
</div></div>
<div class="image"><img src="{image-1}"  width="160" height="210" alt="{title}"/></div>
<div class="custom-data">[rating]{rating}(голосов:{vote-num})[/rating]</div>    

<!-- end shablon -->

<!-- begin shablon -->

</div>
                    
<!-- end shablon -->

<!-- begin shablon -->

<div class="full-description">
<div class="tabheader">
<ul class="tabmenu">

<li class="current"><span>Описание</span></li>
<li><span>Рецензии</span></li>
<li><span>Трейлер</span></li>
<li><span>Скриншоты</span></li>
<li><span>Смотреть онлайн</span></li>
</ul>
</div>
<div class="info-place">
<style>
pre {
font: 12px/19px Arial;
color: rgb(57, 57, 57);}
</style>

<ul class="tabs_content">
<li class="current">{full-story}

</li>

<li>[xfvalue_rec]</li>
<li>[xfvalue_treyler]</li>
<li>
[xfgiven_screens]<div class="fn_box visible"><div class="item-screens"><div class="slides clearfix">[xfvalue_screens]</div></div>[/xfgiven_screens]
</li>
<li>
[xfvalue_online]
</li>
</ul>
</div>

[related-news]<br />
<div class="spacer"></div>
<div class="post-title">Похожее на {title}:</div>
<div class="related-block">
  <ul>
    {related-news}
  </ul>
</div>
    
<div class="spacer"></div>
[/related-news]


[group=5]
<div class="info"> Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем. </div>
[/group]
[comments]

<div class="comments">
<div class="title">Комментариев добавлено: ({comments-num})</div>
<div class="spacer"></div>
<br />{comments}
</div>

[/comments]

</div>    </div>    </div>    

dimavdv
Юзер

dimavdv - 15 мая 2014 19:44 -

если что введи в интернете "закладки html"

ravchik
Юзер

ravchik - 15 мая 2014 19:48 -

Это табы на jquery - тык

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх