带有自定义滚动条的Jquery选项卡式导航

请查看新的/更新的问题

https://stackoverflow.com/questions/7423874/jquery-navigation-and-jscrollpane-work-at-first-but-not-after-click

现在尝试添加自定义滚动条 。 请看演示：

DEMO

截至目前，我无法让它出现。 我的本地源包括：jquery.ui，jquery，jquery.easing.1.3.js，jquery.mCustomScrollbar.css，jquery.mCustomScrollbar.js，jquery.mousewheel.min.js。

我相信它与：

$('.grid').fadeOut(0); 

在单击每个新菜单项后，我只需要在jquery中的某处包含此行：

 $("#mcs_container").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 

此外，在Chrome浏览器中收到以下错误：

247Uncaught TypeError：无法读取null $ .fn.mCustomScrollbar.btnsScrollTimerjquery.mCustomScrollbar.js的属性’top’：247 jQuery.event.handlejquery-latest.js：3001 b

谢谢！

Answer 1

演示

好吧，使用简化的标记很容易（我不能说使用带有jquery选择器返回集的array.sort()方法是重新排列网站上的表格数据的最简单方法）。 在这里，我们只需获取

的列表，并根据它们的第一个

对它们进行自定义排序function的排序。

 var nodeList = $(".grid ul").sort(function(a,b){ return ($(a).find("li:first").text() > $(b).find("li:first").text()); }); $(".grid ul, .grid:gt(0)").remove(); $(".grid").append(nodeList); 

不可能更容易:)

Answer 2

工作演示

编辑：
全function演示：

DEMO

Huuuh :)完成了！
在网络上搜索如何按字母顺序对UL进行排序。 但没有结果。

这个怎么运作：

• 将所有现有的电影克隆到FIRST .slide （现在您不必像以前那样使用任何更多的index -1魔法，以便在按下动作链接后获得正确的.slide ）
• 创建了一个function’sorty’:)
• 将所有li电影名称抓取到每个父元素ul的jQuery .data()中
• 现在网格ul正在保存电影名称。
• 在第一个.slide按字母顺序对所有ul进行排序
• 有用！

您可以看到我将您的一些代码从jQuery移动到CSS（标有//添加！），而不是删除if检查’all’链接。
在HTML中添加了一个包含’info’的正确.slide

jQuery现在将使用克隆元素填充此幻灯片！
我使用了jQuery选择器:gt()来获取所有下一个元素，但是定义了一个元素
（这意味着Ex：如果我们使用$('.element:gt(0)').css({color:'red'});所有比索引’0’更重要的元素都会有一个红色文本。只是第一个element将具有默认颜色。）

---

如果您有任何疑问，请…问问！

现在有两行，它看起来像：

 $('.grid:gt(0)').find('ul:eq(0)').fadeOut(0); // hide titles (not from the first .grid (:eq(0))) $('.grid:gt(0) ul:visible:not(:eq(0))').clone().appendTo( $('.grid:eq(0)') ); // after we hided all the titles - clone all UL elements to our first .slide $('.slide:gt(0)').hide(); function sorty() { // sort UL elements by holding data (the data will be the movie name! ) $('.grid:eq(0) ul:gt(0)').each(function() { var txt1 = $(this).children('li:eq(0)').text(); $(this).data('name', txt1); }); var items = $('.grid:eq(0) ul'); items.sort(function(a, b) { var charA = $(a).data('name'); var charB = $(b).data('name'); if (charA < charB) return -1; if (charA > charB) return 1; return 0; }); var grid = $('.grid:eq(0)'); $(grid).append(items); $('.grid:gt(0)').find('ul:eq(0)').show(); // redo visibility for infos. } sorty(); // run sorty! $('ul.nav li').click(function() { $(this).addClass('btnSelect').siblings().removeClass('btnSelect'); var i = $(this).index(); $('.slide:visible').fadeOut(400, function() { $('.slide:eq(' + i + ')').fadeIn(400); }); });