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

Question

我目前正在使用 reactjs 做一个项目，我想使用链接标签一一显示错误消息，此链接可能引用 div、p、输入、按钮任何 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-tricks 的主题： 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>