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

1488
Пользователи
Сообщений 39
+
0
-
Ваши награды 0
1488 написал: В ответ пользователя 1488 Написано 06 Июля 2016 в 16:45
Сообщение № 1
Всем привет! Снова нужна ваша помощь, теперь на счет вкладоk, на скрине видно вкладки 4.
хотелось-бы так же сделать. Сам сайт где вкладки

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

k43
Друзья
Сообщений 2953
+
+12981
-
Ваши награды 122
k43 написал: отредактировал: k43 - Пятница, 08.07.2016, 14:05 В ответ пользователя k43 Написано 07 Июля 2016 в 16:09
Сообщение № 2
1488, пишешь в поисковике "табы html"

CbIPoK2513
Журналист
Сообщений 32
+
+2181
-
Ваши награды 1
CbIPoK2513 написал: В ответ пользователя CbIPoK2513 Написано 07 Июля 2016 в 18:58
Сообщение № 3
Сам когда-то искал табы, перепробовал штук 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
1488 написал: В ответ пользователя 1488 Написано 07 Июля 2016 в 22:41
Сообщение № 4
Цитата CbIPoK2513 ()
Сам когда-то искал табы, перепробовал штук 20, из них на козе заработали только эти.
Советую.
о хорош! да особо не замечал их на сайтах. увидел на том сайте понравилось иметь 2коммент. и доп:)

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

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


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

k43
Друзья
Сообщений 2953
+
+12981
-
Ваши награды 122
k43 написал: отредактировал: k43 - Понедельник, 11.07.2016, 23:51 В ответ пользователя k43 Написано 11 Июля 2016 в 23:51
Сообщение № 6
trem200, минус этих вкладок в том что они плохо сказываются на seo. К тому же их нужно адаптировать на разные устройства/браузеры

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

Kelin
Проверенные
Сообщений 2046
+
+3522
-
Ваши награды 18
Kelin написал: отредактировал: Kelin - Четверг, 14.07.2016, 23:05 В ответ пользователя Kelin Написано 14 Июля 2016 в 23:05
Сообщение № 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 из 11
Поиск:
Топ пользователей: