Question

我目前正在使用Reactjs开发一个项目，并且我想使用链接标签逐一显示错误消息，该链接可能引用div，p，input，button以及任何html元素。

单击链接，应突出显示适当的html元素。

现在的问题是，有时目标元素位于隐藏的选项卡或div中，而我无法集中注意力

例如在一个非活动的选项卡中，我是否有可能使其处于活动状态，然后对元素进行聚焦？

这是一个简单的示例：

 

function openCity(cityName) { 
  var i;
  var x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(cityName).style.display = "block";
}

const findIt = () => {  
  document
    .getElementById("target")
    .focus(); 
};

.w3-container {
  margin-top:16px;
  margin-bottom:16px;
  }
 
 .w3-container:after,.w3-container:before {
   content:"";
   display:table;
   clear:both
 }
 
 .w3-bar .w3-bar-item{
   padding:8px 16px;
   float:left;
   width:auto;
   border:none;
   display:block;
   outline:0
} 

.w3-black{ 
  color:#fff!important;
  background-color:#000!important 
}

.w3-button{
  border:none;
  display:inline-block;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background-color:inherit;
  text-align:center;
  cursor:pointer;
  white-space:nowrap
}

<div class="w3-container">
      <h2> 3 Tabs below :</h2> 
    </div>

    <div class="w3-bar w3-black">
      <button class="w3-bar-item w3-button" onclick="openCity('London')">
        London
      </button>
      <button class="w3-bar-item w3-button" onclick="openCity('Paris')">
        Paris
      </button>
      <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">
        Tokyo
      </button>
    </div>

    <div id="London" class="w3-container city">
      <h2>London</h2>
      <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="w3-container city" style="display:none">
      <h2>Paris</h2>
      <input value="im ere ry o ind" id="target" />
      <p>Paris is the capital of France.</p>
    </div>

    <div id="Tokyo" class="w3-container city" style="display:none">
      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan.</p>
    </div>
     <br /><br /><br />
    <button onclick="findIt()">click to focus input inside PARIS tab</button>

因此只有在巴黎处于活动状态时它才有效

Answer 1

好的，这是我解决的问题-即使没有选择该选项卡，我也可以使用巴黎选项卡中的输入字段。

我永远不建议在CSS中使用display：none。它完全隐藏了元素，而javascript要求它能够获得的所有脚手架才能正确完成其工作。而是可以创建一个类，以可视方式隐藏内容，但将其保留在代码空间中。在这种情况下，我创建了一个CSS类，该类将隐藏分配给它的div中的所有内容。这样可以使内容仍然可以被Javascript的选择器访问，但是除非删除该类，否则内容不会出现。在javascript文件中，我真正要做的就是删除类并将其添加到元素中，就像您使用display：none一样。

为进一步阅读，我建议阅读以下有关CSS技巧的主题： https://css-tricks.com/forums/topic/is-display-none-the-right-way-to-hide-an-element/

function openCity(cityName) { 
  var i;
  var x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
     x[i].classList.add("hidden-visually");
    }
  document.getElementById(cityName).classList.remove("hidden-visually");
}

const findIt = () => {  
  document
    .getElementById("target")
    .focus(); 
};

.hidden-visually{
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
}

.w3-container {
  margin-top:16px;
  margin-bottom:16px;
  }
 
 .w3-container:after,.w3-container:before {
   content:"";
   display:table;
   clear:both
 }
 
 .w3-bar .w3-bar-item{
   padding:8px 16px;
   float:left;
   width:auto;
   border:none;
   display:block;
   outline:0
} 

.w3-black{ 
  color:#fff!important;
  background-color:#000!important 
}

.w3-button{
  border:none;
  display:inline-block;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background-color:inherit;
  text-align:center;
  cursor:pointer;
  white-space:nowrap
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w3-container">
      <h2> 3 Tabs below :</h2> 
    </div>

    <div class="w3-bar w3-black">
      <button class="w3-bar-item w3-button" onclick="openCity('London')">
        London
      </button>
      <button class="w3-bar-item w3-button" onclick="openCity('Paris')">
        Paris
      </button>
      <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">
        Tokyo
      </button>
    </div>
    


    <div id="London" class="w3-container city">
      <h2>London</h2>
      <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="w3-container city hidden-visually">
      <h2>Paris</h2>
      <input value="im ere ry o ind" id="target"/>
      <p>Paris is the capital of France.</p>
    </div>

    <div id="Tokyo" class="w3-container city hidden-visually">
      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan.</p>
    </div>
     <br /><br /><br />
    <button onclick="findIt()">click to focus input inside PARIS tab</button>

当其中的输入具有焦点时，保持不活动的导航标签显示

1 个答案: