Question

主要目标是根据我点击的按钮显示不同的div，因此它们都以＆＃34; none＆＃34;的显示样式开始。（默认的一个名为＆＃34; atualizacoes＆＃34;）。点击一个按钮后，所有div应设置为 display="none"之后我将该按钮与之关联的设置为display="block"。然而，有些事情是不对的，因为当我点击其中一个按钮时，默认的div确实会消失但是没有任何东西出现。

这就是我尝试完成它的方式：

按顺序：

snippet 1 - 我在index.html中使用的函数来更改所有内容   显示器

摘录2 - 我的样式表中的规则

代码段3 - 我的index.html代码的一部分（我不想粘贴   一切）

＆＃13;

<script type="text/javascript">
			function replace(show) {
			  document.getElementById('default').style.display="none";
			  document.getElementById('ecra').style.display="none";
			  document.getElementById(show).syle.display = "block";
			}
</script>

＆＃13;

.ecra
{
    display: none;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>University Platform</title>
        <!-- Bootstrap core CSS -->
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="dashboard.css" rel="stylesheet">
        <!-- jquery -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
      
  </head>
<body>

<!-- these are the buttons that are located on a sidebar -->
<div class="row">
  <h3>Options</h3>
  
  <button type="button" class="btn btn-default botao pull-left" onclick="replace('addestudante')">Adicionar Estudante</button>
</div>

<div class="row">
  <button type="button" class="btn btn-default botao pull-left" onclick="replace('adduc')">Adicionar UC</button>
</div>

<!-- these are the divs I want to switch around -->
<div class="row" id='default'>
           <p> Hello World </p>                     
</div>

<!-- in CSS I also made a rule that makes all "ecra" divs be invisible from the start-->
<div class="row ecra" id='addestudante'>
  <button type="button" class="btn btn-default">  TEST 1</button>
</div>

<div class="row ecra" id='adduc'> 
  <button type="button" class="btn btn-default"> TEST 2</button>
</div>
  
  
</body>

＆＃13;

为什么此功能无法正常工作？我的代码有问题吗？

Answer 1

您写的内容存在一些问题。

首先，你没有ID和＃34; ecra＆＃34; - 你想要做的是影响所有具有类＆＃34; ecra＆＃34;的元素。您可以通过循环或映射document.getElementsByClassName("ecra")来完成此操作。

其次，当您尝试显示style元素时，您会拼错show。

请尝试使用此改编的功能：

function replace(show) {
    document.getElementById("default").style.display = "none";
    Array.from(document.getElementsByClassName("ecra")).map(element => element.style.display = "none");
    document.getElementById(show).style.display = "block";
}

Answer 2

根据我的想法，您希望按类名获取元素。他们重新ecra，因此您可以使用querySelectorAll并为其长度进行循环。我不会使用getElementsByClassName因为它会使线条更长并返回一个数组。

function replace(show){
    var q=document.querySelectorAll('.ecra'),
    document.getElementById('default').style.display="none";
    for(var i=0,l=q.length;i<l;i++){
            !function(i){
                    q[i].style.display="none"
            }(i)
    }
    document.querySelector('#'+show).style.display = "block"
}

Answer 3

我看到你的页面中导入了jQuery。所以我建议使用jQuery。

<script type="text/javascript">
        function replace(show) {
          jQuery(function($){
                $("#default").css({
                    "display" : "none"
                });
                $(".ecra").css({
                    "display" : "none"
                });
                $("#"+show).css({
                    "display" : "block"
                });
          });
        }
</script>

已编辑，缺少字符。

Answer 4

JS纠正：http://jsfiddle.net/csfd8x35/

＆＃13;

.ecra
{
    display: none;
}

＆＃13;

<!-- these are the buttons that are located on a sidebar -->
<div class="row">
  <h3>Options</h3>
  <button type="button" class="btn btn-default botao pull-left" onclick="replace1('addestudante')">Adicionar Estudante</button>
</div>

<div class="row">
  <button type="button" class="btn btn-default botao pull-left" onclick="replace1('adduc')">Adicionar UC</button>
</div>

<!-- these are the divs I want to switch around -->
<div class="row" id='default'>
           <p> Hello World </p>                     
</div>

<!-- in CSS I also made a rule that makes all "ecra" divs be invisible from the start-->
<div class="row ecra" id='addestudante'>
  <button type="button" class="btn btn-default">  TEST 1</button>
</div>

<div class="row ecra" id='adduc'> 
  <button type="button" class="btn btn-default"> TEST 2</button>
</div>

<script>
    function replace1(show) {
			  document.getElementById('default').style.display="none";
			  var allByClass = document.getElementsByClassName('ecra');
                for (var i=0;i< allByClass.length; i++) {
                      allByClass[i].style.display = "none";
                }
			  document.getElementById(show).style.display = "block";
			}
</script>

＆＃13;

不能用JS功能改变div风格

按顺序：

4 个答案: