Question

我正在尝试进行Javascript切换这样当我点击下面任何一个divNO按钮时，只有div显示所有其他隐藏。但它不起作用：

function toggle(show,hide) {
    document.getElementById(id).style.display = 'block';
    
    document.getElementById(id).style.display= 'none';
  
}

<a href='#' onclick="toggle('show','hide')">div1</a>
<a href='#' onclick="toggle('show','hide')">div2</a>
<a href='#' onclick="toggle('show','hide')">div3</a>
<a href='#' onclick="toggle('show','hide')">div4</a>
<a href='#' onclick="toggle('show','hide')">div5</a>
<div class='div1' >first div</div>
<div id='id' class='div2' style='display:none'>second div</div>
<div id='id' class='div3' style='display:none'>third div</div>
<div class='id' style='display:none'>fourth div</div>
<div class='id' style='display:none'>fifth div</div>

Answer 1

我已经更新了你的标记和javascript函数。见下文：

HTML部分：

<a href='#' onclick="toggle('div1')">div1</a>
<a href='#' onclick="toggle('div2')">div2</a>
<a href='#' onclick="toggle('div3')">div3</a>
<a href='#' onclick="toggle('div4')">div4</a>
<a href='#' onclick="toggle('div5')">div5</a>
<div id='div1' class="div">first div</div>
<div id='div2' class="div" style='display:none'>second div</div>
<div id='div3' class="div" style='display:none'>third div</div>
<div id='div4' class="div" style='display:none'>fourth div</div>
<div id='div5' class="div" style='display:none'>fifth div</div>

和JavaScript部分：

function toggle(id) {
    var divsToHide = document.getElementsByClassName("div");
    for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].style.display = "none";
    }
    document.getElementById(id).style.display = 'block';
}

Answer 2

希望这可以帮助你......

$("a").click(function(){
   var myelement = $(this).attr("href")
    $(myelement).toggle();
    $(".toggle:visible").not(myelement).hide();
    
  });

div.toggle{display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#div1"> DIV 1</a> 
   <a href="#div2"> DIV 2</a>
   
<div class ="toggle" id="div1">div1</div>

<div class ="toggle" id="div2">div2</div>

Answer 3

您可以使用数据属性设置所点击链接的索引，并使用jhn来隐藏/显示链接。

UPDATE - 添加/删除类总是更好，而不是直接影响元素的css。在那种情况下 - 我已经修改了我的解决方案来添加/删除“活跃的”＃39;关于div的类 - 这就是对可怜状态的看法。

＆＃13;

$('a').click(function(){
  var id = $(this).attr('data-id');
  $('.sampleDivs').removeClass('active');
  $('#div' + id).addClass('active');
})

＆＃13;

.sampleDivs {display:none}

.sampleDivs.active {display:block}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' data-id='1'>div1</a>
<a href='#' data-id='2'>div2</a>
<a href='#' data-id='3'>div3</a>
<a href='#' data-id='4'>div4</a>
<a href='#' data-id='5'>div5</a>



<div id ='div1' class='sampleDivs active'>first div</div>
<div id ='div2' class='sampleDivs'>second div</div>
<div id ='div3' class='sampleDivs'>third div</div>
<div id ='div4' class='sampleDivs'>fourth div</div>
<div id ='div5' class='sampleDivs'>fifth div</div>

＆＃13;

Answer 4

首先，使用:target可能会为您提供仅限CSS的解决方案。这个问题是默认显示div。

＆＃13;

.sampleDivs {display:none;}

.sampleDivs:target{display:block;}

＆＃13;

<a href='#div1'>div1</a>
<a href='#div2'>div2</a>
<a href='#div3'>div3</a>
<a href='#div4'>div4</a>
<a href='#div5'>div5</a>


<div id ='div1' class='sampleDivs'>first div</div>
<div id ='div2' class='sampleDivs'>second div</div>
<div id ='div3' class='sampleDivs'>third div</div>
<div id ='div4' class='sampleDivs'>fourth div</div>
<div id ='div5' class='sampleDivs'>fifth div</div>

＆＃13;

由于问题是用jQuery标记的，因此这是一个利用href attribut的语义jQuery替代方案。

＆＃13;

$(".divSelector").click(function(){
    $(".sampleDivs").hide();
    $($(this).attr("href")).show();       
    return false; 
});

＆＃13;

.sampleDivs {
  display: none;
}

.sampleDivs.default {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<a href='#div1' class="divSelector">div1</a>
<a href='#div2' class="divSelector">div2</a>
<a href='#div3' class="divSelector">div3</a>
<a href='#div4' class="divSelector">div4</a>
<a href='#div5' class="divSelector">div5</a>


<div id='div1' class='sampleDivs default'>first div</div>
<div id='div2' class='sampleDivs'>second div</div>
<div id='div3' class='sampleDivs'>third div</div>
<div id='div4' class='sampleDivs'>fourth div</div>
<div id='div5' class='sampleDivs'>fifth div</div>

＆＃13;

Javascript隐藏/显示切换不起作用

4 个答案: