带有onclick的标签会激活其他CSS样式并显示其特定内容

Question

I'm very new to all the Java/Jquery, but for my site I want to use it.

There's this problem; I'm trying to make some fancy tab-style navigation. The point is that if I use the "onclick" in HTML5 it won't do more than one activity.

What I have:

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>

Could someone help me with this?

Summary:

• The buttons should be changing styles.
• Content should appear by clicking button.
• By clicking some other button, the old content should be hidden.

Answer 1

Css for active

.active{ color:#FF6a00!important; background-image:url(images/blackbck.png)!important; background-repeat:round; background-size:cover; }

First add jQuery Library in head

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Add class to all Contents like this:

<div id="CONTENT1" class="content">here somehow wil appear content 1</div>

Remove your onclick on all divs and add class button:

<div id="MENU1" class="active inactive button"><center>1</center></div>

After try this:

<script>
$(document).ready(function(){
    $('.content').css('display','none');
    $('#CONTENT1').css('display','');
    $('#MENU1').click(function(){
        $('.button').removeClass('active');            
        $(this).addClass('active');
        $('.content').fadeOut(300);
        $('#CONTENT1').fadeIn(300);
    });
    $('#MENU2').click(function(){
        $('.button').removeClass('active');            
        $(this).addClass('active');
        $('.content').fadeOut(300);
        $('#CONTENT2').fadeIn(300);
    });
    $('#MENU3').click(function(){
        $('.button').removeClass('active');            
        $(this).addClass('active');
        $('.content').fadeOut(300);
        $('#CONTENT3').fadeIn(300);
    });
    $('#MENU4').click(function(){
        $('.button').removeClass('active');            
        $(this).addClass('active');
        $('.content').fadeOut(300);
        $('#CONTENT4').fadeIn(300);
    });
});    

With fadeIn/Out effects. If you dont want change to .css('display','none') / .css('display','')

Answer 2

You have an error in your code, you are passing '1' to the function showHide() and then using document.getElementById('1'); there is no html element with that id, try to pass the content id of the div you want to show.

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

or do something like this.

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

then in your javascript function do this.

var theDiv = document.getElementById('CONTENT'+divId);
if(theDiv.style.display=="none"){
    theDiv.style.display="block";
} else{
    theDiv.style.display="none";
}   

Answer 3

Just add this line after function showHide(divId) { :

var divId = 'CONTENT'+divId;

JSFIDDLE

Answer 4

you could do it also like this:

//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;
}

here the fiddle: http://jsfiddle.net/bs8gG/

Answer 5

As per what I have understood,

UPDATED JSFIDDLE DEMO

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;   
}

Answer 6

Like the other guys pointed out - your first problem is here:

var theDiv = document.getElementById(divId);

this should rather be:

var theDiv = document.getElementById("CONTENT" + divId);

you pass just a "1" to the showHide function, and then you use document.getElementById to search for an element with an ID="1", instead of ID=”CONTENT1”

Secondly - and what the other guys didn't point out! , the else{} block won't do what you expect it to do – it will just hide the div with the divId, instead of all other divs, Your function fixed:

function showHide(divId){

    //getting all content divs
    var divs = document.getElementById("CONTAINER").childNodes;
    //iterating each of the content divs
    for(var i = 0; i < divs.length; i++){
        //getting id of a current div
        var currentId = divs[i].getAttribute('id'); 
        //if the id fits we want to show the div
        if(currentId === "CONTENT" + divId ){
            divs[i].style.display="block";
        }else{ //otherwise hide it
            divs[i].style.display="none";
        }
    }
}

Mid you that I didn't deal with the style change here. Joao Paulo gave the right answer, but it involves jQuery.

An offtopic:

Instead of using the CENTER tag, always use styles! In your case:

#MENU1, #MENU2, #MENU3, #MENU4{
text-align: center
}