JQuery: How to only apply click function to elements in the current DIV?
<p>I have multiple divs called <code>.details</code>, and I want to apply the following click functions to them. But right now if I click on one li, all li's with the same class names change throughout all the divs called <code>.details</code>. How do I only apply the click function to the current <code>.details</code> div?</p>

<pre><code>$(document).ready(function() {
    $('.details div.two').hide();
    $('.details div.three').hide(); 

    $('.details ul li.one').click(function () { 
        $(this).addClass('active');
        $('.details ul li.two').removeClass('active');
        $('.details ul li.three').removeClass('active');
        $('.details div.one').show();
        $('.details div.two').hide();
        $('.details div.three').hide(); 
    });
    $('.details ul li.two').click(function () { 
        $(this).addClass('active');
        $('.details ul li.one').removeClass('active');
        $('.details ul li.three').removeClass('active');
        $('.details div.one').hide();
        $('.details div.two').show();
        $('.details div.three').hide(); 
    });
    $('.details ul li.three').click(function () {   
        $(this).addClass('active');
        $('.details ul li.one').removeClass('active');
        $('.details ul li.two').removeClass('active');
        $('.details div.one').hide();
        $('.details div.two').hide();
        $('.details div.three').show(); 
    });
});
</code></pre>

<p>HTML</p>

<pre><code>&lt;div class="details"&gt;
    &lt;ul&gt;
        &lt;li class="one active"&gt;&lt;span&gt;Nav 1&lt;/span&gt;&lt;/li&gt;
        &lt;li class="two"&gt;&lt;span&gt;Nav 2&lt;/span&gt;&lt;/li&gt;
        &lt;li class="three"&gt;&lt;span&gt;Nav 3&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="one"&gt;
        &lt;p&gt;Content 1&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="two"&gt;
        &lt;p&gt;Content 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="three"&gt;
        &lt;p&gt;Content 3&lt;/p&gt;
    &lt;/div&gt;                                                                          
&lt;/div&gt;                          
</code></pre>

<p>CSS</p>

<pre><code>.active {background:#fff;}
</code></pre>
