从小提琴中选择标签示例并在我的项目中使用

Question

http://jsfiddle.net/738wtmhs/1/

在我自己的项目中使用上面的示例：为了本练习的目的，我使用DOM方法来创建和追加元素。

    function GetFeatureProperties(feature) {

    //add header to 1st FirstTabContent
    var featureHeader = "<center><b> <FONT COLOR='FF6600'> Feature Properties </FONT> </b> </center> </br>";
    var FirstTabContent = document.createElement('div');
    FirstTabContent.id = "tabs-1";
    FirstTabContent.innerHTML = featureHeader;

    //Second Tab
    var SecondTabContent = document.createElement('div');
    SecondTabContent.id = "tabs-2";
    var newImage = document.createElement("img");
    newImage.src = "http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg";
    newImage.width = "100";
    newImage.height = "100";
    SecondTabContent.appendChild(newImage);

    //add li and ul
    var DivHolding2Tabs = document.createElement('div');
    DivHolding2Tabs.class = "shoptab";
    var header2 = document.createElement('h2');
    header2.innerHTML = "Feature";
    DivHolding2Tabs.appendChild(header2);

    var _ul = document.createElement('ul');

    var _anchor1 = document.createElement("a");
    _anchor1.href = "#tabs-1";
    _anchor1.innerHTML = "Info";
    var _li1 = document.createElement('li');
    _li1.appendChild(_anchor1);

    var _anchor2 = document.createElement("a");
    _anchor2.href = "#tabs-2";
    _anchor2.innerHTML = "Images";
    var _li2 = document.createElement('li');
    _li2.appendChild(_anchor2);

    _ul.appendChild(_li1);
    _ul.appendChild(_li2);

    DivHolding2Tabs.appendChild(_ul);
    DivHolding2Tabs.appendChild(FirstTabContent);
    DivHolding2Tabs.appendChild(SecondTabContent);

    var jelm = $(DivHolding2Tabs); //convert to jQuery Element
    var htmlElm = jelm[0]; //convert to HTML Element

    var OuterDiv = document.createElement('div');
    OuterDiv.id = "loc-list";
    OuterDiv.appendChild(htmlElm);

    return OuterDiv.innerHTML;

}

这看起来像下面看到的图像....如果我点击链接'图像'页面跳了一下但没有任何反应，当我按'信息'时没有任何反应我也把CSS包含在我的项目中所以为什么arnt显示标签，是的我使用jquery ui 1.10.3.custom.js

----------------------------------------------- ----------------------------------------------

更新

<ul id="list"><li><div><h2>Feature</h2><ul><li><a href="#tabs-1">Info</a></li><li><a href="#tabs-2">Images</a></li></ul><div id="tabs-1"><center><b> <font color="FF6600"> Feature Properties </font> </b> </center> <br></div><div id="tabs-2"><img src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" width="100" height="100"></div></div></li></ul>

还从jquery 1.10.3自定义更改为jquery 1.11.2.custom并选择了所有下载的选项卡

Answer 1

如果你看this fiddle，我就设法让它发挥作用。

这是可能存在的问题

1）我更改了返回OuterDiv.innerHTML，因为我需要<div id="loc-list">作为代码的一部分来初始化它。你给了它一个id所以我的猜测是你希望它被包含但是通过做innerHTML，你没有得到它。

2）函数返回后，需要使用$('#loc-list').tabs();

初始化选项卡