jQuery和拆分不一起工作?

时间:2010-08-22 18:48:19

标签: jquery

我正在玩jQuery标签并启动并运行原型。

http://www.omnicom-innovations.com/play/tabsdemo.html

这是我的代码:

$(document).ready(function() {
    $("#tabs").tabs();

  // Select the second tab
  // $("#tabs").tabs({ selected: 1 });

  // http://viralpatel.net/blogs/2009/04/jquery-tabs-create-html-tabs-using-jquery-ui.html
  $('#tabs').bind('tabsselect', function(event, ui) {

    // Objects available in the function context:
    // alert(ui.tab);     // anchor element of the selected (clicked) tab
    var tabPageName = ui.tab;
    alert('Tab Name: ' + tabPageName);

    // var results = tabPageName.substring(tabPageName.IndexOf("#") + 1);
    // alert('Page Name: ' + results);

    var arrData = tabPageName.split("#");
    alert(arrData[1]);

    // alert(ui.panel);   // element, that contains the selected/clicked tab contents
    alert(ui.index);   // zero-based index of the selected (clicked) tab

  });
});

我试图在锚标记中提取选项卡的名称:(#fragment-1,etc ...)。我正在尝试使用split方法(和IndexOf方法作为替代方法)。

<div id="tabs">
    <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>

如您所见,我必须注释掉split()方法,因为我收到以下错误:

未捕获的TypeError:对象http://www.omnicom-innovations.com/play/tabsdemo.html#fragment-3没有方法'split'

但我知道split方法适用于JavaScript。有谁看到我可能遗失的东西?

1 个答案:

答案 0 :(得分:5)

您需要明确地将页面名称转换为字符串:

// DON'T USE THIS - this is a quick & dirty solution, see below for real solution
// choose one - the one you really need
var arrData = tabPageName.toString().split("#")
var results = tabPageName.toString().substring(tabPageName.IndexOf("#") + 1);

使用alert时会自动进行转换,但在尝试split页面名称时则不会。编写本节的最佳方式是:

var tabPageName = ui.tab.toString();
// choose one - the one you really need
var arrData = tabPageName.split("#")
var results = tabPageName.substring(tabPageName.IndexOf("#") + 1);

这是因为您存储在tabPageName变量中的内容实际上并不是页面名称 - 它是标签本身,它在alert编辑时返回其名称。