我正在使用创建大宽度 div 的 TabbedContent 脚本。这个 div 中又包含几个无序列表，每个列表将对应一个选项卡。然后，该脚本会调整大 div 的宽度以适应列表显示内容的区域。
现在，我无法在其中设置固定 div 或绝对 div，因为滚动将不再起作用。我需要的是 2 列设置，其中左列需要保持固定，而右列有文本。两者都需要在列表中，并且我需要能够在其他选项卡上复制它。
这是我用来运行标签系统的 .js：
var TabbedContentSolutions = {
init: function() {
$(".tab_thumb").click(function() {
$(this).siblings().removeClass('active_thumb');
$(this).addClass('active_thumb');
var background = $(this).parent().find(".moving_bg2");
$(background).stop().animate({
left: $(this).position()['left']
}, {
duration: 0
});
TabbedContentSolutions.slideContent2($(this));
});
},
slideContent2: function(obj) {
var margin = $(obj).parent().parent().find(".slide_content2").width();
margin = margin * ($(obj).prevAll().size() - 1);
margin = margin * -1;
$(obj).parent().parent().find(".tabslider2").stop().animate({
marginLeft: margin + "px"
}, {
duration: 0
});
}
}
$(document).ready(function() {
TabbedContentSolutions.init();
});
这是控制 .js 和 div 的 CSS：
.tabbed_content2 {
background-color: ##F7931E;
width: 1000px;
}
.tabbed_content2 .slide_content2 {
overflow: hidden;
position: relative;
width: 1000px;
}
.tabs2{
margin-top: 10px;
margin-left: 10px;
height: 32px;
width: 670px;
position: relative;
float: right;
}
.tabs2 .tab_thumb{
height: 32px;
width: 32px;
margin-left: 9px;
float: left;
cursor: pointer;
}
.tabslider2{
width: 17000px;
overflow-x: hidden;
}
.tabslider2 ul {
float: left;
width: 980px;
height: 323px;
margin: 0px;
padding: 0px;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
overflow-x: hidden;
}
#_solutions{
width: 980px;
height: 300px;
padding-left: 10px;
padding-right: 10px;
}
.solutions_left{
width: 273px;
height: 330px;
padding-right: 10px;
float: left;
}
.solutions_right{
width: 670px;
height: 100%;
overflow: auto;
float: left;
}
.tabslider2 ul li {
padding-bottom: 4px;
list-style-type: none;
}
.active_thumb{
opacity: .10;
}
这是我用来制作标签的基本 div 设置：
<div id="_Content">
<div id="_solutionsWrap">
<div class='tabs2'>
<div class='moving_bg2'>
</div>
<span id="solucoes" class='tab_thumb' style="display:none">
asdasdasd
</span>
<div id="_solutions">
<div class='tabbed_content2'>
<div class='slide_content2'>
<div class='tabslider2'>
<ul>
<li>
<div class="solutions_left">
<p></p>
</div>
<div class="solutions_right">
<h1>solutions</h1>
<p></p>
<p></p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
我知道这听起来令人困惑，但至少会有 17 个不同的选项卡，并且每个选项卡都需要有一个非滚动的让栏来显示图像。
绝对定位根本不起作用，每次您尝试切换选项卡时，div 都会保留在显示区域内。
固定有同样的问题。我不知道如何解决这个问题，因为我对 Javascript 知之甚少，更不用说 jQuery。