call a jquery function depending on selected option
<p>i have a tab menu with different categories:</p>

<pre><code>    &lt;ul class="feed-tabs"&gt;
       &lt;li&gt;category1&lt;/li&gt;
       &lt;li&gt;category2&lt;/li&gt;
       &lt;li&gt;category3&lt;/li&gt;
       &lt;li&gt;category4&lt;/li&gt;
       &lt;li&gt;category5&lt;/li&gt;      
    &lt;/ul&gt;
</code></pre>

<p>When i click in a tab it shows the corresponding div:</p>

<pre><code>&lt;div id="feeds-container"&gt;
    &lt;div class="feed-category1"&gt;
        &lt;div&gt;&lt;p &gt;cat1-1&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p &gt;cat1-2&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p &gt;cat1-3&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p &gt;cat1-4&lt;/p&gt;&lt;/div&gt;           
    &lt;/div&gt;      
    &lt;div class="feed-category2"&gt;
        &lt;div&gt;&lt;p &gt;cat2-1&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p &gt;cat2-2&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p &gt;cat2-3&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p &gt;cat2-4&lt;/p&gt;&lt;/div&gt;           
    &lt;/div&gt;
    &lt;div class="feed-category3"&gt;
        &lt;div&gt;&lt;p &gt;cat3-1&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p &gt;cat3-2&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p &gt;cat3-3&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p &gt;cat3-4&lt;/p&gt;&lt;/div&gt;           
    &lt;/div&gt;
    &lt;div class="feed-category4"&gt;
        &lt;div&gt;&lt;p &gt;cat4-1&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p &gt;cat4-2&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p &gt;cat4-3&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p &gt;cat4-4&lt;/p&gt;&lt;/div&gt;           
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>in that divs i want to use this function:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){

        var first = 0;
        var speed = 400;
        var pause = 3500;

        function removeFirst(){
            first = $('div.feed-category1 div:first').html();
            $('div.feed-category1 div:first')
            .animate({opacity: 0}, speed)
            .fadeOut('100', function() {$(this).remove();});
            addLast(first);
        }

        function addLast(first){
            last = '&lt;div style="display:none"&gt;'+first+'&lt;/div&gt;';
            $('div.feed-category1').append(last)
            $('div.feed-category1 div:last')
            .animate({opacity: 1}, speed)
            .fadeIn('1000')
        }

        interval = setInterval(removeFirst, pause);
    });
&lt;/script&gt;
</code></pre>

<p>which works as a news ticker.
Now it only works with 'feed-category1' because its hardcoded in the jquery function.</p>

<p>How can i make it work for all categories.</p>

<p>the sample code is this:</p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;

    &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://static.cdncast.com/anyblog/frontpagev2/js/jquery.tools.min.js"&gt;&lt;/script&gt;

    &lt;style&gt;
        ul.feed-tabs { list-style:none; }
        ul.feed-tabs li { float: left; text-decoration: none; padding: 0 20px; cursor: pointer; }
        hr { clear:both; }
    &lt;/style&gt;

    &lt;script type="text/javascript"&gt;
        $(function() {
            $("ul.feed-tabs").tabs("#feeds-container &gt; div", { effect: 'fade', fadeInSpeed : 700, current : 'current', tabs : 'li' });
        });

        $(document).ready(function(){

            var first = 0;
            var speed = 400;
            var pause = 3500;

            function removeFirst(){
                first = $('div.feed-category1 div:first').html();
                $('div.feed-category1 div:first')
                .animate({opacity: 0}, speed)
                .fadeOut('100', function() {$(this).remove();});
                addLast(first);
            }

            function addLast(first){
                last = '&lt;div style="display:none"&gt;'+first+'&lt;/div&gt;';
                $('div.feed-category1').append(last)
                $('div.feed-category1 div:last')
                .animate({opacity: 1}, speed)
                .fadeIn('1000')
            }

            interval = setInterval(removeFirst, pause);
        });
    &lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;div id="header"&gt;
        &lt;ul class="feed-tabs"&gt;
           &lt;li&gt;category1&lt;/li&gt;
           &lt;li&gt;category2&lt;/li&gt;
           &lt;li&gt;category3&lt;/li&gt;
           &lt;li&gt;category4&lt;/li&gt;
           &lt;li&gt;category5&lt;/li&gt;      
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;hr&gt;
    &lt;div id="feeds-container"&gt;
        &lt;div class="feed-category1"&gt;
            &lt;div&gt;&lt;p &gt;cat1-1&lt;/p&gt;&lt;/div&gt;
            &lt;div&gt;&lt;p &gt;cat1-2&lt;/p&gt;&lt;/div&gt;
            &lt;div&gt;&lt;p &gt;cat1-3&lt;/p&gt;&lt;/div&gt;
            &lt;div&gt;&lt;p &gt;cat1-4&lt;/p&gt;&lt;/div&gt;           
        &lt;/div&gt;      
        &lt;div class="feed-category2"&gt;
            &lt;div&gt;&lt;p &gt;cat2-1&lt;/p&gt;&lt;/div&gt;
            &lt;div&gt;&lt;p &gt;cat2-2&lt;/p&gt;&lt;/div&gt;
            &lt;div&gt;&lt;p &gt;cat2-3&lt;/p&gt;&lt;/div&gt;
            &lt;div&gt;&lt;p &gt;cat2-4&lt;/p&gt;&lt;/div&gt;           
        &lt;/div&gt;
        &lt;div class="feed-category3"&gt;
            &lt;div&gt;&lt;p &gt;cat3-1&lt;/p&gt;&lt;/div&gt;
            &lt;div&gt;&lt;p &gt;cat3-2&lt;/p&gt;&lt;/div&gt;
            &lt;div&gt;&lt;p &gt;cat3-3&lt;/p&gt;&lt;/div&gt;
            &lt;div&gt;&lt;p &gt;cat3-4&lt;/p&gt;&lt;/div&gt;           
        &lt;/div&gt;
        &lt;div class="feed-category4"&gt;
            &lt;div&gt;&lt;p &gt;cat4-1&lt;/p&gt;&lt;/div&gt;
            &lt;div&gt;&lt;p &gt;cat4-2&lt;/p&gt;&lt;/div&gt;
            &lt;div&gt;&lt;p &gt;cat4-3&lt;/p&gt;&lt;/div&gt;
            &lt;div&gt;&lt;p &gt;cat4-4&lt;/p&gt;&lt;/div&gt;           
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
