• Страница 1 из 1
  • 1
Форум » Форум веб мастеров » uCoz » Как Создать Вкладки для вида материалов и комментарий к нему
Как Создать Вкладки для вида материалов и комментарий к нему

1488
Пользователи
Сообщений 39
+
0
-
Ваши награды 0
Всем привет! Снова нужна ваша помощь, теперь на счет вкладоk, на скрине видно вкладки 4.
хотелось-бы так же сделать. Сам сайт где вкладки

Огромной Спасибо За Внимание!
«Пред. тема След. тема»

k43
Друзья
Сообщений 2955
+
+12981
-
Ваши награды 122
k43 написал: отредактировал: k43 - Пятница, 08.07.2016, 14:05 В ответ пользователя k43 Написано 07 Июля 2016 в 16:09
2<\' onclick=\'this.select();\' style=\'width:95%;text-align: center; height:20px; margin-top:15px;\'/>');" style="text-align:right; margin-left:19px;">Сообщение № 2
1488, пишешь в поисковике "табы html"

CbIPoK2513
Журналист
Сообщений 39
+
+2191
-
Ваши награды 1
Сам когда-то искал табы, перепробовал штук 20, из них на козе заработали только эти.
Советую.



Установка.
HTML
Код
.tabs {
  list-style: none;
  height: 32px;
  border-bottom: 1px solid #e0e0e0;
  margin: 0;
  padding: 0;
}
.page_tabs {
  list-style: none;
  height: 32px;
  width: 100%;
  margin-top: 10px;
  margin-bottom: -20px;
  border-bottom: none;
}
.tabs li, .page_tabs li {
  margin: 0px;
  padding: 0px;
  float: left;
  height: 31px;
  line-height: 32px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  position: relative;
  background: #eaeaea url('http://mvcreative.ru/example/18/images/tab-bg.png') repeat-x;
  margin-right: 2px;
  margin-bottom: -1px;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.page_tabs li.active a {
  -webkit-border-top-right-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.tabs li a, .page_tabs li a {
  font-weight: bold;
  color: #666666;
  text-decoration: none;
  display: block;
  padding: 0px 20px;
  outline: none;
}
.tabs li a:hover, .page_tabs li a:hover {
  color: #3DC0E0;
}
.tabs li.active, .tabs li.active a, .tabs li.active a:hover, .page_tabs li.active, .page_tabs li.active a, .page_tabs li.active a:hover {
  color: #333333;
  background: #ffffff;
  border-bottom: 1px solid #ffffff;
}
.tab_container {
  border: 1px solid #e0e0e0;
  border-top: none;
  overflow: hidden;
  margin-bottom: 20px;
  background: #ffffff;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.tab_content {
  margin: 19px;
  /* 20 - border */
}


CSS
Код
<ol class="tabs">
  <li><a href="#tab1">Первая</a>
  </li>
  <li><a href="#tab2">Вторая</a>
  </li>
  <li><a href="#tab3">Третья</a>
  </li>
  <li><a href="#tab4">Четвёртая</a>
  </li>
</ol>
<div class="tab_container">
  <div id="tab1" class="tab_content">Содержимое первой вкладки</div>
  <div id="tab2" class="tab_content">Содержимое второй вкладки</div>
  <div id="tab3" class="tab_content">Содержимое третьей вкладки</div>
  <div id="tab4" class="tab_content">Содержимое четвёртой вкладки</div>
</div>


JS
Код
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tabs li:first-child").addClass("active");
$(".tab_content:first-child").show();
$(".tabs li").click(function() {
if (!$(this).hasClass("active")) {
$(this).parent().find("li").removeClass("active");
$(this).parent().next().find(".tab_content").hide();

var activeTab = $(this).find("a").attr("href");
$(this).addClass("active");
$(this).parent().next().find(activeTab).fadeIn();
}
return false;
});
});
</script>
подпись: Если я тебе помог, то и ты помоги:
Дай + в репу CbIPoK2513

1488
Пользователи
Сообщений 39
+
0
-
Ваши награды 0
Цитата CbIPoK2513 ()
Сам когда-то искал табы, перепробовал штук 20, из них на козе заработали только эти.
Советую.
о хорош! да особо не замечал их на сайтах. увидел на том сайте понравилось иметь 2коммент. и доп:)

Добавлено (07.07.2016, 19:14)
---------------------------------------------
k43, тоже спасибо за совет.

Добавлено (07.07.2016, 22:41)
---------------------------------------------
CbIPoK2513, торопясь на ответ, перепутал html na css cowboy


Десерт
Проверенные
Сообщений 22
+
+2016
-
Ваши награды 1
CbIPoK2513, спасибо огромное, то же когда были нужны вкладки, ни как не могу найти, а сейчас благодаря вам, всё будет замечательно.

k43
Друзья
Сообщений 2955
+
+12981
-
Ваши награды 122
k43 написал: отредактировал: k43 - Понедельник, 11.07.2016, 23:51 В ответ пользователя k43 Написано 11 Июля 2016 в 23:51
6<\' onclick=\'this.select();\' style=\'width:95%;text-align: center; height:20px; margin-top:15px;\'/>');" style="text-align:right; margin-left:19px;">Сообщение № 6
trem200, минус этих вкладок в том что они плохо сказываются на seo. К тому же их нужно адаптировать на разные устройства/браузеры

Десерт
Проверенные
Сообщений 22
+
+2016
-
Ваши награды 1
k43, да возможно в этих вкладках есть минусы, но я думаю, что адаптацию можно сделать, но сперва нужно посмотреть пару тройку статей по этому

Kelin
Проверенные
Сообщений 2049
+
+3543
-
Ваши награды 18
Kelin написал: отредактировал: Kelin - Четверг, 14.07.2016, 23:05 В ответ пользователя Kelin Написано 14 Июля 2016 в 23:05
8<\' onclick=\'this.select();\' style=\'width:95%;text-align: center; height:20px; margin-top:15px;\'/>');" style="text-align:right; margin-left:19px;">Сообщение № 8
k43,
> SEO
> 2016
А вообще, каким раком оно на сео сказывается?

P.S. Кто юзает Riot (а тут врядли такие найдутся), тот поймет.
P.S.S. Ну ладно, для тех, кто не шарит, вот пример кода на Riot:
Код
<todo>

  <!-- шаблон -->
  <h3>{ opts.title }</h3>

  // логика
  this.items = [1, 2, 3]

</todo>
подпись: Kelin
Форум » Форум веб мастеров » uCoz » Как Создать Вкладки для вида материалов и комментарий к нему
  • Страница 1 из 1
  • 1
Поиск:
Друзья сайта:
Связаться с администратором для дружбы! В Вовчик
Nk-CS.Ru - Лучшие шаблоны для uCoz n na3uTuB4uk94
Web-мастер системы uCoz R Roman_Domnin
Связаться с администратором для дружбы! В Вовчик
Связаться с администратором для дружбы! В Вовчик
Топ пользователей: