Перейти к содержимому



Проблемы с таблицами для сайта

#1 лоуренс
лоуренс
  • Пользователь
  • 14 сообщений
  • Репутация: 0
0

Обновлено 06 июля 2019 - 16:27  Отправлено 05 июля 2019 - 21:39

можете помочь с созданием нескольких сворачиваемых таблиц для сайта 
можете скинуть код или часть кода чтобы я смог понять что к чему т.к если у меня получается сделать сворачиваемые таблицы блок на который я нажимаю выглядит как текст либо наоборот 


 

 

  • 0

#2 web-coder
web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 19

Отправлено 05 июля 2019 - 21:46

Не совсем понятно, что вы имеете в виду.

Опишите задачу более подробно.

Покажите что уже сделали.


  • 0

#3 лоуренс
лоуренс
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 0

Отправлено 05 июля 2019 - 22:18

@web-coder, Ну моя цель была создать небольшую страничку с несколькими таблицами которые можно развернуть как блок но у меня всегда что-то не получалось. И я со злости удалил все наработки 


  • 0

#4 web-coder
web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 19

Отправлено 05 июля 2019 - 22:37

Покажите хотя бы пример, где вы такое увидели. 


  • 0

#5 лоуренс
лоуренс
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 0

Отправлено 05 июля 2019 - 23:22

@web-coderhttps://taxi24hours.ru/ 
примерно как у них 


  • 0

#6 web-coder
web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 19

Отправлено 05 июля 2019 - 23:53

Это обычные вкладки.

Делаются примерно так

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.tab-btn{
			display: inline-block;
		}
		.tab-btn.active{
			background: yellow;
		}
		.tab{
			display: none;
		}
		.tab.active{
			display: block;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$(document).on('click', '.tab-btn:not(.active)', function(){
				$('.tab-btn.active').removeClass('active');
				$(this).addClass('active');
				var tabID = $(this).attr('data-tab');
				$('.tab.active').removeClass('active');
				$('.tab#'+tabID).addClass('active');
			});
		});
	</script>
</head>
<body>
	<ul class="tab-btn-list">
		<li><a class="tab-btn active" data-tab="tab-1">Кнопка 1</a></li>
		<li><a class="tab-btn" data-tab="tab-2">Кнопка 2</a></li>
		<li><a class="tab-btn" data-tab="tab-3">Кнопка 3</a></li>
	</ul>
	<div class="tabs">
		<div class="tab active" id="tab-1">
			<table>
				<tr>
					<th>Таблица 1</th>
					<th>Таблица 1</th>
					<th>Таблица 1</th>
				</tr>
				<tr>
					<td>Таблица 1</td>
					<td>Таблица 1</td>
					<td>Таблица 1</td>
				</tr>
			</table>
		</div>
		<div class="tab" id="tab-2">
			<table>
				<tr>
					<th>Таблица 2</th>
					<th>Таблица 2</th>
					<th>Таблица 2</th>
				</tr>
				<tr>
					<td>Таблица 2</td>
					<td>Таблица 2</td>
					<td>Таблица 2</td>
				</tr>
				<tr>
					<td>Таблица 2</td>
					<td>Таблица 2</td>
					<td>Таблица 2</td>
				</tr>
			</table>
		</div>
		<div class="tab" id="tab-3">
			<table>
				<tr>
					<th>Таблица 3</th>
					<th>Таблица 3</th>
					<th>Таблица 3</th>
				</tr>
				<tr>
					<td>Таблица 3</td>
					<td>Таблица 3</td>
					<td>Таблица 3</td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>

  • 1

#7 лоуренс
лоуренс
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 0

Отправлено 06 июля 2019 - 00:32

@web-coder, вообще-то у меня была другая проблема и это глупая возможно но я не могу сделать кнопку на которую я нажимаю под фон не сломая вкладки и я также пытаюсь сделать кнопки в строчку и так же сделать кнопки сверху а таблицу снизу ;-;


Сообщение отредактировал лоуренс: 06 июля 2019 - 00:34

  • 0

#8 web-coder
web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 19

Отправлено 06 июля 2019 - 00:45

@лоуренс, так вам нужно просто стилизовать кнопки?)

.tab-btn-list{
	list-style: none;
	padding: 0;
	margin: 0 0 10px -5px;
}
.tab-btn-list:after{
	content: "";
	display: table;
	clear: both;
}
.tab-btn-list li{
	float: left;
	padding: 0;
	margin: 0 0 0 5px;
}
.tab-btn{
	display: inline-block;
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	background: green;
	color: #fff;
	cursor: pointer;
}
.tab-btn.active{
	background: yellow;
	color: #222;
}

  • 0

#9 лоуренс
лоуренс
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 0

Отправлено 06 июля 2019 - 13:00

@web-coder, да и как кнопки сделать сверху а таблицу снизу ;-; ;-;


Сообщение отредактировал лоуренс: 06 июля 2019 - 13:00

  • 0

#10 web-coder
web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 19

Отправлено 06 июля 2019 - 13:02

да и как кнопки сделать сверху а таблицу снизу
 

а сейчас разве не так?


  • 0

#11 лоуренс
лоуренс
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 0

Отправлено 06 июля 2019 - 14:14

@web-coder, неа только кнопки стали меньше и цвет изменился

 


  • 0

#12 web-coder
web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 19

Отправлено 06 июля 2019 - 14:30

неа только кнопки стали меньше и цвет изменился
 

Ну вообще, в примере, который я выслал, кнопки изначально были над таблицей...

Покажите на скриншотах как должно быть, и как у вас сейчас.


  • 0

#13 лоуренс
лоуренс
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 0

Отправлено 06 июля 2019 - 14:48

как должно быть https://taxi24hours.ru/ 
как у меня 

Прикрепленные изображения

  • Безымянный.png

Сообщение отредактировал лоуренс: 06 июля 2019 - 14:49

  • 0

#14 web-coder
web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 19

Отправлено 06 июля 2019 - 15:29

Ну скидывайте свой код.

Будем смотреть, что у вас не так.


  • 0

#15 лоуренс
лоуренс
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 0

Отправлено 06 июля 2019 - 16:21

Ну как нашел проблему?


  • 0

#16 web-coder
web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 19

Отправлено 06 июля 2019 - 16:27

Ну как нашел проблему?
 

Где? Проблема в разметке, которую вы так и не предоставили...

Я же дал рабочий пример.

Неужели так трудно просто скопировать?


  • 0

robot
robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
DeHuC_64 DeHuC_64 1-й за Июнь
Очков активности: 33 0 тем, 22 сообщения, 1 балл репутации
Сайт: russiangreat.ru
ТОП самых активных за этот месяц
  • Фотография BuxarNET
    #1

    BuxarNET
    Очков активности: 10.5 1 тема, 4 сообщения, 1 балл репутации

  • Фотография DeHuC_64
    #2

    DeHuC_64 (russiangreat.ru)
    Очков активности: 10.5 Вне конкурса за определение пользователя месяца

  • Фотография HITMAN84
    #3

    HITMAN84
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография Teves
    #4

    Teves
    Очков активности: 7.5 0 тем, 5 сообщений, 1 балл репутации

  • Фотография Silver
    #5

    Silver
    Очков активности: 6 0 тем, 4 сообщения, 1 балл репутации

  • Фотография vetalbon
    #6

    vetalbon
    Очков активности: 6 0 тем, 4 сообщения, 1 балл репутации

  • Фотография BLIK
    #7

    BLIK
    Очков активности: 4.5 0 тем, 3 сообщения, 1 балл репутации

  • Фотография narolskay
    #8

    narolskay (ortopedicheskaja-podushka.ru)
    Очков активности: 1.5 0 тем, 1 сообщение, 1 балл репутации

  • Фотография sdfs
    #9

    sdfs (proxy5.ru)
    Очков активности: 1.5 0 тем, 1 сообщение, 1 балл репутации

  • Фотография miketomlin
    #10

    miketomlin
    Очков активности: 1.5 0 тем, 1 сообщение, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Последние темы

Топ 5 участников по репутации

Оформление форума – IPBSkins.ru