<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	
	xmlns:georss="http://www.georss.org/georss"
	xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
	>

<channel>
	<title>tab | Web活メモ帳</title>
	<atom:link href="https://blog.verygoodtown.com/tag/tab/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.verygoodtown.com</link>
	<description>WEB開発者が使える世界の情報を発信します</description>
	<lastBuildDate>Sun, 31 Jan 2010 07:10:25 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.9.10</generator>
<site xmlns="com-wordpress:feed-additions:1">122803348</site>	<item>
		<title>jQuery1.4でタブを動的に作成するチュートリアル</title>
		<link>https://blog.verygoodtown.com/2010/01/dynamic-tab-create-jquery/</link>
					<comments>https://blog.verygoodtown.com/2010/01/dynamic-tab-create-jquery/#respond</comments>
		
		<dc:creator><![CDATA[linja]]></dc:creator>
		<pubDate>Sun, 31 Jan 2010 07:10:25 +0000</pubDate>
				<category><![CDATA[php]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[tab]]></category>
		<category><![CDATA[動的]]></category>
		<guid isPermaLink="false">http://blog.verygoodtown.com/?p=1454</guid>

					<description><![CDATA[<p>jQueryでタブを動的に作成するチュートリアルDynamic tabs using jQuery &#8211; why and how to create it のご紹介。 jQueryでiGoogleのように自由に [&#8230;]</p>
The post <a href="https://blog.verygoodtown.com/2010/01/dynamic-tab-create-jquery/">jQuery1.4でタブを動的に作成するチュートリアル</a> first appeared on <a href="https://blog.verygoodtown.com">Web活メモ帳</a>.]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" src="https://blog.verygoodtown.com/wordpress/wp-content/uploads/dynamic_tabs.png" alt="dynamic_tabs" title="dynamic_tabs" width="600" height="160" class="alignnone size-full wp-image-1455" srcset="https://blog.verygoodtown.com/wordpress/wp-content/uploads/dynamic_tabs.png 600w, https://blog.verygoodtown.com/wordpress/wp-content/uploads/dynamic_tabs-300x80.png 300w" sizes="(max-width: 600px) 100vw, 600px" /><br />
jQueryでタブを動的に作成するチュートリアル<a href="http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx" target="_blank">Dynamic tabs using jQuery &#8211; why and how to create it </a>のご紹介。</p>
<p><span id="more-1454"></span></p>
<p>jQueryでiGoogleのように自由にタブの追加や削除を行う事が可能になります。<br />
実際の<a href="http://www.jankoatwarpspeed.com/examples/dynamic_tabs/" target="_blank">デモ</a>を見ていただくと動きがわかると思います。</p>
<p>以下のようなhtmlとJavaScriptを用意するだけで動作するようです。</p>
<pre class="brush:xml;">
<div id="doclist">
    <h2>Documents</h2>
    <ul id="documents">
        <li><a href="#" rel="Document1" title="This is the content of Document1">Document1</a></li>
        <li><a href="#" rel="Document2" title="This is the content of Document2">Document2</a></li>
        <li><a href="#" rel="Document3" title="This is the content of Document3">Document3</a></li>
        <li><a href="#" rel="Document4" title="This is the content of Document4">Document4</a></li>
        <li><a href="#" rel="Document5" title="This is the content of Document5">Document5</a></li>
    </ul></div><div id="wrapper">
    <ul id="tabs">
        <!-- Tabs go here -->
    </ul>
    <div id="content">
        <!-- Tab content goes here -->
    </div>
</div>

</pre>
<pre class="brush:js;">
&lt;script&gt;
$("#documents a").click(function() {
    addTab($(this));
});
function addTab(link) {
    // hide other tabs
    $("#tabs li").removeClass("current");
    $("#content p").hide();
    
    // add new tab and related content
    $("#tabs").append("<li class='current'><a class='tab' id='" +
        $(link).attr("rel") + "' href='#'>" + $(link).html() +
        "</a><a href='#' class='remove'>x</a></li>");
    $("#content").append("<p id='" + $(link).attr("rel") + "_content'>" +
        $(link).attr("title") + "</p>");
    // set the newly added tab as curren
    $("#" + $(link).attr("rel") + "_content").show();
}
&lt;/script&gt;
</pre>
<p>ダイナミックなページを作成したい方は、使ってみてはいかがでしょうか。</p>The post <a href="https://blog.verygoodtown.com/2010/01/dynamic-tab-create-jquery/">jQuery1.4でタブを動的に作成するチュートリアル</a> first appeared on <a href="https://blog.verygoodtown.com">Web活メモ帳</a>.]]></content:encoded>
					
					<wfw:commentRss>https://blog.verygoodtown.com/2010/01/dynamic-tab-create-jquery/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">1454</post-id>	</item>
	</channel>
</rss>
