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

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','')

于 2013-11-05T13:28:49.870 回答
0

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

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
}
于 2013-11-05T13:56:43.900 回答
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 回答
0

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

var divId = 'CONTENT'+divId;

JSFIDDLE

于 2013-11-05T13:32:23.357 回答