1

わかりました、私も最終的にそれが私が望むように動作するようになりました。

別の DIV を表示するように求められた場合に、表示/非表示用の異なるボタンと非表示にする必要がありました。また、タグを 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;}
4

3 に答える 3

4

ほとんどの場合、より良い方法があります... ;)

JavaScript:

$("document").ready(function(){
    $("#links a").click(function(){
        $(".feature").hide();
        $("#features div").eq($(this).index()).show();
    });
    $("a.hide").click(function(){
        $(this).parent("div").hide();
    });
});

HTML: (HTML 構造を少し変更しました)

<div id="links">
    <a href="#">Show</a>
    <a href="#">Show</a>
    ...
</div>

<div id="features">
    <div class="feature">
        Fill this space with really interesting content 1. <a href="#" class="hide">Hide</a>
    </div>
    <div class="feature">
        Fill this space with really interesting content 2. <a href="#" class="hide">Hide</a>
    </div>
    ...
</div>

デモ(JSFiddle)

于 2012-08-18T20:30:19.567 に答える
3

ID の代わりにクラスを使用できます。現在のマークアップに基づいて、コードを縮小しました。次のことを試してください。

$(document).ready(function() {

    $('a[id^=show]').click(function() {
        var which = this.id.slice(-1);
        $(this).addClass("active").siblings('a').removeClass("active");
        $("div[id^='feature']").hide();
        $("#feature-"+which).show();
    });

    $('a[id^=hide]').click(function() {
        var which = this.id.slice(-1);
        $(this).parent().hide();
        $('#show'+which).removeClass("active");
    });

});

フィドル

于 2012-08-18T20:24:43.957 に答える
2 
<a href="#" onclick="myfunction('show1','feature-1')" class="anchors" id="show1">Show</a>
<a href="#" onclick="myfunction('show2','feature-2')" class="anchors" id="show2">Show</a>
<a href="#" onclick="myfunction('show3','feature-3')" class="anchors" id="show3">Show</a>
<a href="#" onclick="myfunction('show4','feature-4')" class="anchors" id="show4">Show</a>
<a href="#" onclick="myfunction('show5','feature-5')" class="anchors" id="show5">Show</a>
<a href="#" onclick="myfunction('show6','feature-6')" class="anchors" id="show6">Show</a>

<div class="features" id="feature-1">
Fill this space with really interesting content 1. <a href="#" onclick="$(this).parent().hide();">Hide</a>
</div>

<div class="features"  id="feature-2">
Fill this space with really interesting content 2. <a href="#" onclick="$(this).parent().hide();">Hide</a>
</div>


<div class="features" id="feature-3">
Fill this space with really interesting content 3. <a href="#" onclick="$(this).parent().hide();">Hide</a>
</div>

<div class="features" id="feature-4">
Fill this space with really interesting content 4. <a href="#" onclick="$(this).parent().hide();">Hide</a>
</div>

<div class="features" id="feature-5">
Fill this space with really interesting content 5. <a href="#" onclick="$(this).parent().hide();">Hide</a>
</div>

<div class="features" id="feature-6">
Fill this space with really interesting content 6. <a href="#" onclick="$(this).parent().hide();">Hide</a>
</div>
/// javascript

function myfunction(anchor_id, feature_id){
 $('.anchors').removeClass("active");
    $(".features").hide();
    $("#"+feature_id).show();
    $("#"+anchor_id).addClass("active");
}

私はあなたのJSコードの希望の一部を最小限に抑えたので、あなたに役立つでしょう

于 2012-08-18T20:33:15.847 に答える