Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery UI Tab not showing correctly
    primarykey
    data
    text
    <p>I am creating jQuery UI Tabs but all the tabs show static with all the contents, the tab is not working correctly, not selectable. (I don't have enough reputation to post image >&lt;) The data is from XML file. </p> <p>Here is the code: (I have all the link and script in the head) in HTML:</p> <pre><code>&lt;div id="tabs"&gt; &lt;ul id="tabtitle"&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>My js file:</p> <pre><code>$(document).ready(function(){ var i = 1; $.get('data.xml', function(d){ $(d).find('page').each(function(){ var $page = $(this), title = $page.find('title').text(), description = $page.find('description').text(), var tabtitle = '&lt;li&gt;&lt;a href="#tab-' + i + '"&gt;' + title + '&lt;/a&gt;' + '&lt;/li&gt;'; $('ul#tabtitle').append($(tabtitle)); var tabcontent = '&lt;div id="tabs-' + i + '"&gt;'; tabcontent += '&lt;p&gt; ' + description + '&lt;/p&gt;' ; tabcontent += '&lt;/div&gt;'; $('#tabs').append($(tabcontent)); i++; }); }); $( "#tabs" ).tabs(); }); </code></pre> <p>My XML file:</p> <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;Pages&gt; &lt;page&gt; &lt;title&gt;Tab1&lt;/title&gt; &lt;description&gt;content for Tab1 here&lt;/description&gt; &lt;/page&gt; &lt;page&gt; &lt;title&gt;Tab2&lt;/title&gt; &lt;description&gt;content for Tab2 here&lt;/description&gt; &lt;/page&gt; &lt;page&gt; &lt;title&gt;Tab3&lt;/title&gt; &lt;description&gt;content for Tab3 here&lt;/description&gt; &lt;/page&gt; &lt;page&gt; &lt;title&gt;Tab4&lt;/title&gt; &lt;description&gt;content for Tab4 here&lt;/description&gt; &lt;/page&gt; &lt;/Pages&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload