0

私はすべての Java/Jquery に非常に慣れていませんが、自分のサイトではそれを使用したいと考えています。

この問題があります。派手なタブ スタイルのナビゲーションを作成しようとしています。ポイントは、HTML5 で「onclick」を使用すると、複数のアクティビティが実行されないことです。

私が持っているもの：

HTML/JAVA/CSS:

    <!-- this are the buttons to press for showing content. -->

        <div id="MENU1" class="active" onclick="showHide('1');"><center>1</center></div>
        <div id="MENU2" class="inactive" onclick="showHide('2');"><center>2</center></div>
        <div id="MENU3" class="inactive" onclick="showHide('3');"><center>3</center></div>
        <div id="MENU4" class="inactive" onclick="showHide('4');"><center>4</center></div>

        <div id="CONTAINER">
        <!-- here should appear text -->
        <div id="CONTENT1">here somehow wil appear content 1</div>
        <div id="CONTENT2">here somehow wil appear content 2</div>
        <div id="CONTENT3">here somehow wil appear content 3</div>
        <div id="CONTENT4">here somehow wil appear content 4</div>
        </div>

    <script type="text/javascript"> 
    function showHide(divId){
        var theDiv = document.getElementById(divId);
        if(theDiv.style.display=="none"){
            theDiv.style.display="block";
        }else{
            theDiv.style.display="none";
        }    
    }
    </script>


<!-- the style of the buttons have to change from .inactive to .active -->
    <style>
    .active{
        color:#FF6a00;
        background-image:url(images/blackbck.png);
        background-repeat:round;
        background-size:cover;
    }

    .inactive{
        color:black;
        background-image:url(images/orangebck.png);
        background-repeat:round;
        background-size:cover;
    }
    </style>

誰かがこれで私を助けてくれますか?

概要：

  • ボタンはスタイルを変更する必要があります。
  • ボタンをクリックするとコンテンツが表示されます。
  • 他のボタンをクリックすると、古いコンテンツが非表示になります。
4

6 に答える 6

0

次のようにすることもできます。

//HTML
<div data-tab="1" id="MENU1" class="tab-navi active" onclick="showHide('1');"><center>1</center></div>
<div data-tab="2" id="MENU2" class="tab-navi" onclick="showHide('2');"><center>2</center></div>

<div id="CONTAINER">
    <!-- here should appear text -->
    <div class="tab-content" id="CONTENT1">here somehow wil appear content 1</div>
    <div class="tab-content"  id="CONTENT2">here somehow wil appear content 2</div>
</div>
//JQUERY
$("div.tab-navi").on("click", function(){
    var $this = $(this);
    var id = $this.attr("data-tab");
    $("div.tab-content").hide(); //Hide all
    $(".tab-navi").removeClass("active");
    $("#CONTENT"+id).show();
    $this.addClass("active");
});
//CSS
.tab-navi.active{
    color:#FF6a00;
    background-image:url(images/blackbck.png);
    background-repeat:round;
    background-size:cover;
}

.tab-navi{
    color:black;
    background-image:url(images/orangebck.png);
    background-repeat:round;
    background-size:cover;
}

ここでフィドル：http://jsfiddle.net/bs8gG/

于 2013-11-05T13:44:35.537 に答える
0

私が理解したことによると、

更新されたJSFIDDLEデモ

HTML

<button id="MENU1" class="active" onclick="showHide('1');"><center>1</center></button>
        <button id="MENU2" class="inactive" onclick="showHide('2');"><center>2</center></button>
        <button id="MENU3" class="inactive" onclick="showHide('3');"><center>3</center></button>
        <button id="MENU4" class="inactive" onclick="showHide('4');"><center>4</center></button>

        <div id="CONTAINER"></div>

JS

function showHide(divId){
    $("button").removeClass("active");
    var id = "MENU" + divId;
    var theDiv = document.getElementById(id);
      $(theDiv).addClass("active"); 

    var data = "<div id='CONTENT'" + divId + ">here somehow wil appear content " + divId + "</div>";
    var print = document.getElementById("CONTAINER");
    print.innerHTML = data;   
}
于 2013-11-05T13:44:49.977 に答える
0

コードにエラーがあります。'1' を関数 showHide() に渡し、次に document.getElementById('1'); を使用しています。その ID を持つ html 要素はありません。表示したい div のコンテンツ ID を渡してみてください。

<div id="MENU1" class="active" onclick="showHide('CONTENT1');"><center>1</center></div>

またはこのようなことをします。

<div id="MENU1" class="active" onclick="showHide('1');"><center>1</center></div>

次に、JavaScript関数でこれを行います。

var theDiv = document.getElementById('CONTENT'+divId);
if(theDiv.style.display=="none"){
    theDiv.style.display="block";
} else{
    theDiv.style.display="none";
}
于 2013-11-05T13:31:36.460 に答える