How to fade out list items that don't have a specific class?

How to fade out list items that don't have a specific class?

I have a list of links in a sidebar, each with an associated class name. 
When one of these links are clicked, I want to fade out all of the main content list items that do NOT have this class (ie - if I click on boots, I want to fade out the list items heels and sandals)
Can anyone tell me how to code this in jquery?  Thanks a lot!


Here's my html...

<div id="shopSidebar">
    <ul>
         <li><a href="#" class="heels">Heels</a></li>
         <li><a href="#" class="boots">Boots</a></li>
         <li><a href="#" class="sandals">Sandals</a></li>
    </ul>
</div>

<div id="mainContent">
      <ul>
           <li class="heels">...</li>
           <li class="boots">...</li>
           <li class="sandals">...</li>
      </ul>
</div>