Как сделать так, чтобы конечный контент не перекрывал содержимое моей вкладки?
Я разработал веб-страницу, которая использует только CSS для разрешения шаблона дизайна вкладок. К его объективной проблеме нет, и работает; но в нем есть пара ошибок, которые я хотел бы исправить, и, похоже, не могу найти способ сделать это.
Было бы хорошо, если бы решение было совместимо с IE 7, 8 или 9 (поскольку мой текущий шаблон работает только в Edge, Chrome и Firefox).
Проблема возникает, когда у меня есть элементы ниже содержащего DIV, и содержимое внутри перекрывает его. Кажется, что контейнер DIV не «меняет размер» при изменении вкладок.
Вот пример того, как выглядит страница:
<html>
<head>
<style>
.tabs{display:block;list-style:none;position:relative;padding:0;border-bottom:4px solid #475b7e;}
.tabs li{margin:0;display:inline-block;font-weight:bold;cursor:auto;border:none;max-width:100px;vertical-align:top;}
.tabs li .tab{display:none;}
.tabs li i{font-weight:normal;}
.tabs li [for^=tab]{background-color:#bcc7d8;color:#314362;display:block;position:relative;padding:0 4px 0 4px;margin:0;line-height:18px;}
.tabs li [for^=tab]:hover{background-color:#ffffff;color:#475b7e;}
.tabs li .tab:checked + [for^=tab]{background-color:#314362;color:#ffffff;}
.tabs li .tab:checked + [for^=tab]:hover{background-color:#475b7e;color:#ffffff;}
.tabs li .tab:checked ~ [class=tabcontainer]{display:block;position:absolute;left:0;width:100%;}
.tabs li .tabcontainer{display:none;padding:6px 4px 20px 4px;font-weight:normal;}
</style>
</head>
<body>
<p>Below is a DIV that i would like to grow with the UL list; and also be able to see the text on the next P mark (below the DIV); and more, i would like to be able to use this on IE 7 as well, at least IE 9.</p>
<div class = "container">
<ul class = "tabs">
<li>
<input type = "radio" class = "tab" name = "tab" id = "tab_first" checked = "checked" /><label for = "tab_first">First</label>
<div class = "tabcontainer">Content of First, single line</div>
</li>
<li>
<input type = "radio" class = "tab" name = "tab" id = "tab_second" /><label for = "tab_second">Second</label>
<div class = "tabcontainer">Content of Second<br />2 Lines now</div>
</li>
<li>
<input type = "radio" class = "tab" name = "tab" id = "tab_third" /><label for = "tab_third">Third</label>
<div class = "tabcontainer">Content of Third<br /><br />3 lines, second is empty</div>
</li>
<li>
<input type = "radio" class = "tab" name = "tab" id = "tab_forth" /><label for = "tab_forth">Forth</label>
<div class = "tabcontainer">Content of Forth, (just because) 1 line again</div>
</li>
<li>
<input type = "radio" class = "tab" name = "tab" id = "tab_fifth" /><label for = "tab_fifth">Fifth</label>
<div class = "tabcontainer">Content of Fifth<br />Another line, but even more<br /></br /><br />Now done</div>
</li>
</ul>
</div>
<p>Text i would like to see</p>
</body>
</html>Еще одна вещь: можно было бы использовать на нем javascript (поскольку я уже использую jQuery-UI на сайте), но я не могу изменить структуру «UL» для использования модели вкладок jQuery-UI.
Пожалуйста помоги!
Это почти та же самая структура, которую я использовал; даже CSS почти такой же - хорошо - я все же протестирую его, потому что я не делал там, где он не перекрывал бы следующие элементы.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Абсолютное позиционирование представляет собой проблему, поэтому вкладки только для CSS и вкладки jQuery имеют разную структуру разметки. Вы можете написать jQuery для изменения разметки перед применением компонента вкладок jQuery:
// create a contents element below the list
$('.container').append('<div class = "tabs-content"></div>');
// loop through each list item
$('ul.tabs li').each(function() {
// move contents to div below list and give each an index-based ID
$(this).find('.tabcontainer')
.appendTo('.tabs-content')
.attr('id', 'tab' + $(this).index());
// strip markup from list items and build anchors targeting the appropriate ID
$(this).html('<a href = "#tab' + $(this).index() + '">' + $(this).text() + '</a>' );
});
// initialize jQuery-UI tabs
$('.container').tabs();
кажется, дает результат ... повлияет ли это на что-то еще? сначала попробую, но очень понравилось
Только если на вашей странице есть другие элементы с такими же классами. Если это так, вам следует быть более конкретным с селекторами.
не то, что я имел в виду, извините; я имею в виду обратную передачу, распознавание элементов сервером при обратном вызове страницы и тому подобное; Кроме того, элементы «до» и «после» работают в IE 7 или 9? Сначала проверяю и тестирую - потом отмечу ваш ответ и воспользуюсь им
ну ... это "сработало", я оставлю это как решение, но мне пришлось внести несколько изменений, например, ".container" не всегда существует (на каждой странице), и результат немного "неформатирован" "- заголовок вкладки очень большой по высоте - все корректировки, которые я делаю, основаны на этом, поэтому спасибо @isherwood
Это может вам помочь onextrapixel.com/creating-content-tabs-with-pure-css