Question

我有切换标签，但我的问题是如何修复内容？例如，如果我切换标签，我的内容仍然是固定的，即使是短内容或长内容

在这段代码中，当我的内容很长时，我的布局会很长，我的内容很短，我的内容也会很长。

如何修复设置布局？

＆＃13;

.tabs{
    	margin-bottom:25px;
    }
    .nav-tabs{
    }
    .nav-tabs li{
    	position:relative;
    	display:block;
    	float:left;
    	margin-right:1px;
    }
    .nav-tabs li a{
    	display:block;
    	padding:10px 20px;
    	background:#efefef;
    	text-decoration:none;
    }
    .nav-tabs li > i{
    	color:#efefef;
    }
    .nav-tabs li > i{
    	position: absolute;
    	bottom: -10px;
    	font-size: 16px;
    	width: 20px;
    	left: 50%;
    	margin-left: -10px;
    }
    .nav-tabs li a:hover{
    	color:#fff;
    	background:#666;
    	text-decoration:none;
    }
    .nav-tabs li a:active, .nav-tabs li.active a{
    	color:#fff;
    	background:#666;
    }
    .tab-content{
    	padding:20px 0;
    	background:#ffffff;
    }
    .tab-content > .tab-pane{
    	display:none;
    }
    .tab-content > .active{
    	display:block;
    }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="tabs">
                    <ul class="nav nav-tabs">
                      <li class="active"> <a data-toggle="tab" href="#sampletab1"> Sample Tab #1 </a> </li>
                      <li> <a data-toggle="tab" href="#sampletab2"> Sample Tab #2 </a> </li>
                      <li> <a data-toggle="tab" href="#sampletab3"> Sample Tab #3 </a> </li>
                    </ul>
                    <div class="tab-content">
                      <div id="sampletab1" class="tab-pane active">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.</p>
                      </div>
                      <div id="sampletab2" class="tab-pane">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Donec vestibulum justo a diam ultricies pellentesque.</p>
                      </div>
                      <div id="sampletab3" class="tab-pane">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum. </p>
                      </div>
                    </div>
                  </div>

＆＃13;

三江源

Answer 1

将此css代码添加到.tab-content以使用滚动

创建此固定高度

.tab-content{
height: 80px;//change this value
overflow-y: scroll;
}

Answer 2

您可以使用此代码确定最大高度.tab-pane然后将此高度指定给.tab-content，以便将其修复并获取最大高度

var maxHeight=0;
$(".tab-content .tab-pane").each(function(){
$(this).addClass("active");
var height = $(this).height();
maxHeight = height>maxHeight?height:maxHeight;
$(this).removeClass("active");
});
$(".tab-content .tab-pane:first").addClass("active");
$(".tab-content").height(maxHeight);

如何修改开关标签内容？

2 个答案: