我正尝试在我的站点中构建一些 jQuery 功能，但遇到了障碍。我需要将 jQuery block 样式菜单拆分为 2 列，可能还有 3 列，而不是将它们全部放在一列中。我会尽可能多地张贴在这里。我确定我遗漏了一些明显的东西。我将从我要离开的网站开始:
http://upsidestudio.com/web/splitcol/2/
现在我得到的 CSS:
.tabs {
width: 700px;
font-weight: ;
margin: 0;
padding: 0px;
float: left;
}
<head>我的 html:(我想我的错误会在这里:我是 jQuery/Javascript 的新手)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>My Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<!-- !Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />
<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" type="text/css" media="screen" /><![endif]-->
<!-- !jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
// initialize scrollable
$("#browsable").scrollable({circular: true}).navigator().autoscroll({
interval: 10000
});
// initialize scrollable together with the autoscroll plugin
var root = $("#scroller").scrollable({circular: true}).autoscroll({ autoplay: false });
// perform JavaScript after the document is scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div")
});
});
<!-- !jQuery Split Navigation -->
$(document).ready(function() {
$('.tabs').each(function() {
if($(this).is("ol")) { var ordered = true; }
var colsize = Math.round($(this).find("li").size() / 2);
$(this).find("li").each(function(i) {
if (i>=colsize) {
$(this).addClass('right_col');
}
});
if(ordered) {
$(this).find('.right_col').insertAfter(this).wrapAll("<ol class='tabs' start='" + (colsize+1) + "'></ol>").removeClass("right_col");
} else {
$(this).find('.right_col').insertAfter(this).wrapAll("<ul class='tabs'></ul>").removeClass("right_col");
}
});
});
</script>
</head>
最后...我的 Html 部分。
<!--THE TABS-->
<hr width="575" size="4" noshade align="left">
<ul class="tabs">
<li><a href="#">What We Do</a></li>
<li><a href="#">How It Works</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">The Ajungo Team</a></li>
<li><a href="#">Advertise</a></li>
</ul>
<hr width="575" size="4" noshade align="left"><br/><br/>
<!--TAB PANES COME IN BELOW THIS-->
最佳答案
好吧，我能看到的最大问题是您在脚本 block 中间有一个 HTML 注释:
<!-- !jQuery Split Navigation -->
删除它，然后添加
.tabs {
margin-bottom: 20px;
}
您可以看到 ul.tabs 列表被分成两部分。但是，脚本中存在一些效率低下的问题。它可以像这样更干净地重写:
$('.tabs').each(function() {
var t = $(this), // Store a copy of both $(this) and t.children(),
children = t.children(), // to avoid calling the jQuery function too much
// Create a clone of the original list, then empty it and insert it after the original
secondList = t.clone(false).empty().insertAfter(this),
// Calculate the number of elements to move to the second list
// ie. half the number of elements in the list, divided by two and rounded up
length = Math.ceil(children.length / 2);
// Move half the children of the original list to the new one
children.slice(length).appendTo(secondList);
// If the list is an ordered list, let the list start at the correct position
if(this.nodeName === 'OL'){
secondList.attr('start', length + 1);
}
});
关于javascript - 拆分列表的 jQuery 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4573427/