Question

我开发了一个仅使用CSS来解决设计的Tab模式的网页。达到目标是没有问题的，并且有效；但是它有一些我想修复的错误，而且似乎找不到解决方法。

如果该解决方案与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 Tabs模型。

请帮助！

Answer 1

绝对定位提出了一个挑战，这就是纯CSS标签和jQuery标签具有不同标记结构的原因。您可以在应用jQuery的tabs组件之前编写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();

Fiddle demo

如何避免尾随内容重叠标签内容？

1 个答案: