有没有更好的方法来编写这个Show/hide JQuery代码

好吧，我终于按照我想要的方式工作了。

我需要它有不同的按钮来显示/隐藏和隐藏，如果要求显示另一个DIV，我还需要将我的a标签放置在远离DIV标签的位置，以及添加和删除活动的类。但是，尽管它有效，我知道它真的很乱。

这里有一个链接：http://jsfiddle.net/qKWC8/24/

这是JS：

$(document).ready(function() {
    // Feature box 1
    $('#show1').click(function() {
        $('#show2,#show3,#show4,#show5,#show6').removeClass("active");
        $("#feature-2,#feature-3,#feature-4,#feature-5,#feature-6").hide();
        $("#feature-1").show();
        $(this).addClass("active");
    });
    $('#hide1').click(function() {
        $(this).parent().hide();
        $('#show1').removeClass("active");
    });
    // Feature box 2
    $('#show2').click(function() {
        $('#show1,#show3,#show4,#show5,#show6').removeClass("active");
        $("#feature-1,#feature-3,#feature-4,#feature-5,#feature-6").hide();
        $("#feature-2").show();
        $(this).addClass("active");
    });
    $('#hide2').click(function() {
        $(this).parent().hide();
        $('#show2').removeClass("active");
    });
    // Feature box 3
    $('#show3').click(function() {
        $('#show1,#show2,#show4,#show5,#show6').removeClass("active");
        $("#feature-1,#feature-2,#feature-4,#feature-5,#feature-6").hide();
        $("#feature-3").show();
        $(this).addClass("active");
    });
    $('#hide3').click(function() {
        $(this).parent().hide();
        $('#show3').removeClass("active");
    });
    // Feature box 4
    $('#show4').click(function() {
       $('#show1,#show2,#show3,#show5,#show6').removeClass("active");
        $("#feature-1,#feature-2,#feature-3,#feature-5,#feature-6").hide();
        $("#feature-4").show();
        $(this).addClass("active");
    });
    $('#hide4').click(function() {
        $(this).parent().hide();
        $('#show4').removeClass("active");
    });
    // Feature box 5
    $('#show5').click(function() {
       $('#show1,#show2,#show3,#show4,#show6').removeClass("active");
        $("#feature-1,#feature-2,#feature-3,#feature-4,#feature-6").hide();
        $("#feature-5").show();
        $(this).addClass("active");
    });
    $('#hide5').click(function() {
        $(this).parent().hide();
        $('#show5').removeClass("active");
    });
    // Feature box 6
    $('#show6').click(function() {
       $('#show1,#show2,#show3,#show4,#show5').removeClass("active");
        $("#feature-1,#feature-2,#feature-3,#feature-4,#feature-5").hide();
        $("#feature-6").show();
        $(this).addClass("active");
    });
    $('#hide6').click(function() {
        $(this).parent().hide();
        $('#show6').removeClass("active");
        });
    });

这是HTML:

<a href="#" id="show1">Show</a>
<a href="#" id="show2">Show</a>
<a href="#" id="show3">Show</a>
<a href="#" id="show4">Show</a>
<a href="#" id="show5">Show</a>
<a href="#" id="show6">Show</a>
<div id="feature-1">
    Fill this space with really interesting content 1. <a href="#" id="hide1">Hide</a>
</div>
<div id="feature-2">
    Fill this space with really interesting content 2. <a href="#" id="hide2">Hide</a>
</div>

<div id="feature-3">
    Fill this space with really interesting content 3. <a href="#" id="hide3">Hide</a>
</div>
<div id="feature-4">
    Fill this space with really interesting content 4. <a href="#" id="hide4">Hide</a>
</div>
<div id="feature-5">
    Fill this space with really interesting content 5. <a href="#" id="hide5">Hide</a>
</div>
<div id="feature-6">
    Fill this space with really interesting content 6. <a href="#" id="hide6">Hide</a>
</div>

这是CSS：

#feature-1,#feature-2,#feature-3,#feature-4,#feature-5,#feature-6 {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
    display: none;
}
.active{background:#00FFFF;}