javascript - 带有 onclick 的选项卡激活其他 css 样式并显示它的特定内容

Question

我对所有 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>

有人可以帮我解决这个问题吗？

概括：

• 按钮应该改变样式。
• 内容应通过单击按钮出现。
• 通过单击其他按钮，应隐藏旧内容。

Answer 1

用于活动的 CSS

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

首先在head中添加jQuery库

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

像这样向所有内容添加类：

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

删除所有 div 上的 onclick 并添加类按钮：

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

试试这个之后：

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

带有淡入/淡出效果。如果您不想更改为 .css('display','none') / .css('display','')

Answer 2

就像其他人指出的那样-您的第一个问题在这里：

var theDiv = document.getElementById(divId);

这应该是：

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

您只需将“1”传递给 showHide 函数，然后使用 document.getElementById 来搜索 ID 为“1”的元素，而不是 ID=”CONTENT1”</p>

其次 -以及其他人没有指出的！, else{} 块不会做你期望它做的事情——它只会隐藏带有 divId 的 div，而不是所有其他 div，你的函数已修复：

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

在你中间，我没有处理这里的风格变化。Joao Paulo 给出了正确的答案，但它涉及到 jQuery。

题外话：

不要使用 CENTER 标签，而是使用样式！在你的情况下：

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

Answer 3

你也可以这样做：

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

Answer 4

据我了解，

更新的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;   
}

Answer 5

您的代码中有错误，您将 '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";
}   

Answer 6

只需在后面添加这一行function showHide(divId) {：

var divId = 'CONTENT'+divId;

JSFIDDLE