多排选项卡 效果
<style type="text/css">
.E{border:solid 1px blue;width:800px;height:auto;margin:0px;padding:0px;text-align:left;}
.E li
{
height:20px;overflow:hidden;list-style:none;width:700px;
}
.E li div{float:left;width:auto;height:18px;border:solid 1px red;width:100px;cursor:pointer;}
.B{width:680px;height:auto;overflow:hidden;border:solid 1px red;}
.sd{background-color:Red;}
</style>
<script type="text/javascript">
function loadUrl(url) { window.ifmCon.location.href = url; }
function setItems(oldid,showid,div) {
var rowSize = 6;
var rowHeight = 22;
var baseID = "li";
var divItems = document.getElementById(oldid);
var divShowItems = document.getElementById(showid);
var divItems_divs = divItems.getElementsByTagName(div);
var intCount = parseInt(divItems_divs.length / rowSize);
var modCount = divItems_divs.length % rowSize;
var intRowCount = intCount;
if (modCount > 0) { intRowCount = intRowCount + 1; }
divShowItems.style.height = intRowCount * rowHeight + "px";
for (var i = 0; i < intCount; i++) {
var divRow = document.createElement("li");
divRow.id = baseID + i;
if (i == 0) {
divRow.style.marginTop = ((intRowCount - 1) * rowHeight) + "px";
divRow.style.position = "relative";
divRow.style.zIndex = "2";
}
else {
divRow.style.marginTop = "-" + (2 * rowHeight) + "px";
divRow.style.paddingLeft = i * 5 + "px";
}
for (var i1 = 0; i1 < rowSize; i1++) {
divRow.appendChild(divItems_divs[0]);
}
divShowItems.appendChild(divRow);
}
if (modCount > 0) {
var divRow = document.createElement("li");
divRow.id = baseID + intCount;
if (intCount > 0) { divRow.style.marginTop = "-" + (2 * rowHeight) + "px"; }
divRow.style.paddingLeft = (intRowCount - 1) * 5 + "px";
for (var i = 0; i < modCount; i++) {
divRow.appendChild(divItems_divs[0]);
}
divShowItems.appendChild(divRow);
}
}
function showSd(obj) {
var url = "defaultUrl.aspx";
var pObj = obj.parentNode;
var oldId = "oldItemId";
var oldItem = document.getElementById(oldId);
if (oldItem != null) {
oldItem.className = "";
oldItem.id = "";
}
obj.className = "sd";
obj.id = oldId;
if (pObj.id != "li0") {
var objLi0 = document.getElementById("li0");
var objTemp = objLi0.innerHTML;
objLi0.innerHTML = pObj.innerHTML;
pObj.innerHTML = objTemp;
}
loadUrl(url);
}
</script>
<body>
<div class="D" id="divItems">
<div onclick="showSd(this);">1afdf</div>
<div onclick="showSd(this);">2dfadagdg</div>
<div onclick="showSd(this);">3dasdgasgd</div>
<div onclick="showSd(this);">4dafsdf</div>
<div onclick="showSd(this);">5dfadsfs</div>
<div onclick="showSd(this);">6dfasdf</div>
<div onclick="showSd(this);">7dfa</div>
<div onclick="showSd(this);">8adsgd</div>
<div onclick="showSd(this);">9adfs</div>
<div onclick="showSd(this);">10dfasddagdg</div>
<div onclick="showSd(this);">11dfasdga d</div>
<div onclick="showSd(this);">12dfasd</div>
<div onclick="showSd(this);">13sfdafas</div>
<div onclick="showSd(this);">14adfas</div>
<div onclick="showSd(this);">15fasdf</div>
<div onclick="showSd(this);">16fasdf</div>
<div onclick="showSd(this);">17dfasddagdg</div>
<div onclick="showSd(this);">18dfasdga d</div>
<div onclick="showSd(this);">19dfasd</div>
<div onclick="showSd(this);">20sfdafas</div>
<div onclick="showSd(this);">21adfas</div>
<div onclick="showSd(this);">22fasdf</div>
<div onclick="showSd(this);">23fasdf</div>
</div>
<ul id="divShowItems" class="E"></ul>
<div class="B">
<iframe id="ifmCon" width="100%" frameborder="no" scrolling="no"></iframe>
</div>
<script type="text/javascript"> setItems("divItems", "divShowItems","div");</script>
</body>
</html>
.E{border:solid 1px blue;width:800px;height:auto;margin:0px;padding:0px;text-align:left;}
.E li
{
height:20px;overflow:hidden;list-style:none;width:700px;
}
.E li div{float:left;width:auto;height:18px;border:solid 1px red;width:100px;cursor:pointer;}
.B{width:680px;height:auto;overflow:hidden;border:solid 1px red;}
.sd{background-color:Red;}
</style>
<script type="text/javascript">
function loadUrl(url) { window.ifmCon.location.href = url; }
function setItems(oldid,showid,div) {
var rowSize = 6;
var rowHeight = 22;
var baseID = "li";
var divItems = document.getElementById(oldid);
var divShowItems = document.getElementById(showid);
var divItems_divs = divItems.getElementsByTagName(div);
var intCount = parseInt(divItems_divs.length / rowSize);
var modCount = divItems_divs.length % rowSize;
var intRowCount = intCount;
if (modCount > 0) { intRowCount = intRowCount + 1; }
divShowItems.style.height = intRowCount * rowHeight + "px";
for (var i = 0; i < intCount; i++) {
var divRow = document.createElement("li");
divRow.id = baseID + i;
if (i == 0) {
divRow.style.marginTop = ((intRowCount - 1) * rowHeight) + "px";
divRow.style.position = "relative";
divRow.style.zIndex = "2";
}
else {
divRow.style.marginTop = "-" + (2 * rowHeight) + "px";
divRow.style.paddingLeft = i * 5 + "px";
}
for (var i1 = 0; i1 < rowSize; i1++) {
divRow.appendChild(divItems_divs[0]);
}
divShowItems.appendChild(divRow);
}
if (modCount > 0) {
var divRow = document.createElement("li");
divRow.id = baseID + intCount;
if (intCount > 0) { divRow.style.marginTop = "-" + (2 * rowHeight) + "px"; }
divRow.style.paddingLeft = (intRowCount - 1) * 5 + "px";
for (var i = 0; i < modCount; i++) {
divRow.appendChild(divItems_divs[0]);
}
divShowItems.appendChild(divRow);
}
}
function showSd(obj) {
var url = "defaultUrl.aspx";
var pObj = obj.parentNode;
var oldId = "oldItemId";
var oldItem = document.getElementById(oldId);
if (oldItem != null) {
oldItem.className = "";
oldItem.id = "";
}
obj.className = "sd";
obj.id = oldId;
if (pObj.id != "li0") {
var objLi0 = document.getElementById("li0");
var objTemp = objLi0.innerHTML;
objLi0.innerHTML = pObj.innerHTML;
pObj.innerHTML = objTemp;
}
loadUrl(url);
}
</script>
<body>
<div class="D" id="divItems">
<div onclick="showSd(this);">1afdf</div>
<div onclick="showSd(this);">2dfadagdg</div>
<div onclick="showSd(this);">3dasdgasgd</div>
<div onclick="showSd(this);">4dafsdf</div>
<div onclick="showSd(this);">5dfadsfs</div>
<div onclick="showSd(this);">6dfasdf</div>
<div onclick="showSd(this);">7dfa</div>
<div onclick="showSd(this);">8adsgd</div>
<div onclick="showSd(this);">9adfs</div>
<div onclick="showSd(this);">10dfasddagdg</div>
<div onclick="showSd(this);">11dfasdga d</div>
<div onclick="showSd(this);">12dfasd</div>
<div onclick="showSd(this);">13sfdafas</div>
<div onclick="showSd(this);">14adfas</div>
<div onclick="showSd(this);">15fasdf</div>
<div onclick="showSd(this);">16fasdf</div>
<div onclick="showSd(this);">17dfasddagdg</div>
<div onclick="showSd(this);">18dfasdga d</div>
<div onclick="showSd(this);">19dfasd</div>
<div onclick="showSd(this);">20sfdafas</div>
<div onclick="showSd(this);">21adfas</div>
<div onclick="showSd(this);">22fasdf</div>
<div onclick="showSd(this);">23fasdf</div>
</div>
<ul id="divShowItems" class="E"></ul>
<div class="B">
<iframe id="ifmCon" width="100%" frameborder="no" scrolling="no"></iframe>
</div>
<script type="text/javascript"> setItems("divItems", "divShowItems","div");</script>
</body>
</html>
浙公网安备 33010602011771号