我正在使用TabbedContent腳本創建一個寬度較大的div。這個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和CSS的div:
.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個不同的TA bs,並且每個都需要有一個非滾動條來顯示圖像。
絕對定位將無法正常工作,每次嘗試切換標籤時,div都會保留在顯示區域內。
固定有同樣的問題。 我不知道如何解決這個問題,因爲我知道很少或沒有Javascript,更不用說jQuery。
在jsfiddle.net中創建一個演示此問題的實時演示。 Solutuon可能與腳本無關,可能與純粹的css相關 – charlietfl