Question

我正在使用Jquery创建一个动态标签，它的工作正常但是锚标记 onclick 错误是无效字符。请参阅javascript：

$(document).ready(function(){

    //when page loads...
    $(".tab_content").hide(); //hide all content
    $("ol.tabs li:first").addClass("active").show();  //Activate first tab
    $(".tab_content:first").show(); // show first tab content

    //on click event
    $("ol.tabs li").click(function(){
        $("ol.tabs li").removeClass("active"); //remove any "active" class
        $(this).addClass("active"); // add "active" class to selected tabs
        $(".tab_content").hide(); // hide all tab content
        //var activeTab = $(this).find("a").attr("href"); // find href attribute value to identify the active tab + content
        var activeTab = $(this).find("a").attr("onclick"); // find href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); // fadeIn the active ID content
        alert(activeTab);
        return false;
    });

});

HTML：

<div>
    <div id="tab1" class="tab_content">01</div>
    <div id="tab2" class="tab_content">02</div>
    <div id="tab3" class="tab_content">03</div>
</div>
<ol class="tabs">
    <li><a onclick="#tab1">Unique benefits</a></li>
    <li><a onclick="#tab2">Insurance</a></li>
    <li><a onclick="#tab3">Business Loan</a></li>
</ol>

如果我使用var activeTab = $(this).find("a").attr("href"); 它的工作很好。帮忙

Answer 1

这是预期的行为。

因为，上次检查时，onclick是一个事件，而不是属性或属性 href和onclick也完全不同。

Answer 2

如果你想获得onclick的内容（功能），你可以这样做：

$('p').click(function () {
            alert($(this).text());
        });

        $.each($("p").data("events"), function (i, event) {
            alert(i);
            $.each(event, function (j, h) {
                alert(h.handler);
            });
        });

Answer 3

您的onclick内联属性与此相同：

function() {
    #tab1
}

这是无效的javascript。虽然href是一个字符串值，它告诉链接在单击时应该去哪里（默认行为），但onclick是一个javascript函数，它是click事件的处理程序，用于提供替代行为。

Answer 4

您不能将元素的onclick设置为任意字符串，这对javascript没有任何意义。相反，您应该使用href或data-attributes等字段来存储用于事件的信息。

要使用href属性，请将ol列表更改为：

<ol class="tabs">
    <li><a href="#tab1">Unique benefits</a></li>
    <li><a href="#tab2">Insurance</a></li>
    <li><a href="#tab3">Business Loan</a></li>
</ol>

然后而不是

var activeTab = $(this).find("a").attr("onclick"); // find href attribute value to identify the active tab + content
$(activeTab).fadeIn(); // fadeIn the active ID content

并使用此javascript：

var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();

这将使用链接的href属性显示带有该ID的标签。

或者，要使用数据属性，您可以将列表设置为更像：

<ol class="tabs">
    <li><a href="#" data-tabid="tab1">Unique benefits</a></li>
    <li><a href="#" data-tabid="tab2">Insurance</a></li>
    <li><a href="#" data-tabid="tab3">Business Loan</a></li>
</ol>

并使用此javascript：

var activeTab = $(this).find("a").data("tabid");
$("#" + activeTab).fadeIn();

此方法使用data-attributes来保存您要显示的标签<div>的ID。

Answer 5

onclick属性是一个事件处理程序属性，与您在脚本上的这行代码中执行的操作相同：

$（“ol.tabs li”）。点击（

请参阅：http://reference.sitepoint.com/html/event-attributes/onclick

换句话说，您正在通过名称“＃tab1”将click事件的处理分配给脚本哈希标记是一个'非法'脚本char。

为了实现你想要的，有一些人认为你可以做到。首先使用数据属性。

<ol class="tabs">
        <li><a data-tab-name="#tab1">Unique benefits</a></li>
        <li><a data-tab-name="#tab2">Insurance</a></li>
        <li><a data-tab-name="#tab3">Business Loan</a></li>
</ol>

他们将你的js行改为：

var activeTab = $(this).find("a").attr("data-tab-name");

在相关的说明中，我将在您的脚本上更改一些内容。由于您将事件处理程序附加到列表项的onclick事件，因此我将该属性添加到列表项中，如下所示。

<ol class="tabs">
        <li data-tab-name="#tab1"><a>Unique benefits</a></li>
        <li data-tab-name="#tab2"><a>Insurance</a></li>
        <li data-tab-name="#tab3"><a>Business Loan</a></li>
</ol>

这允许我将js行改为：

var activeTab = $(this).attr("data-tab-name");

应该提高性能但更重要的是使代码更具可读性。

希望这有帮助。

$（本）.find（ “A”）ATTR（ “点击”）。 onclick给出无效的字符

5 个答案: