Группы скрывают прицел. логотипы сайтов

Question 1

У меня есть справочная страница, но я хочу ее отредактировать. Я хотел бы разделить их в соответствии с рабочими областями. Например техника здоровья и тд. Я делаю для этого работу, но обычно меня интересует php. Это вещи, на которые я не смотрел очень давно. Я не люблю JS и стараюсь не использовать его, если мне не нужно. Моя проблема в том, что после одного идентификатора появляются другие, пытающиеся скрыть его. но это было так, я не могу помочь мне, как позвонить, я не знаю, что сканировать.

function gizleGoster(ID) {
  var secilenID = document.getElementById(ID);
  if (secilenID.style.display == "none") {
    secilenID.style.display = "";
  } else {
    secilenID.style.display = "none";
  }
}
function tumu() {
  var secilenID = document.getElementById('health');
     secilenID.style.display = "";
     secilenID = document.getElementById('technology');
     secilenID.style.display = "";
     secilenID = document.getElementById('automotive');
     secilenID.style.display = "";
}

<a href="#" onclick="tumu()">All</a> 
<a href="#" onclick="gizleGoster('health')">Health</a> 
<a href="#" onclick="gizleGoster('technology')">Technology</a>
<a href="#" onclick="gizleGoster('automotive')">Automotive</a><br>

<br>
<br>
<div id="health">health</div><br>
<div id="technology">technology </div><br>
<div id="automotive">automotive</div><br>
<div id="health">health</div><br>

javascript html

0

Muhammet Onur Aslan

Answer

Вот один из способов сделать это. Возможно, вам придется настроить его так, как вам нужно, чтобы он соответствовал вашему варианту использования. Обратите внимание, что я также изменил ваш HTML.

function getIndustries() {
    return document.getElementById('industries').getElementsByTagName("div");
}

function hideElement(element){
    element.style.display = "none";
}

function showElement(element) {
  element.style.display = "";
}

function tumu() {
  var industries = getIndustries();
  for(var industry of industries) {
    showElement(industry);
  }
}

function gizleGoster(ID) {
  var industries = getIndustries();
  for(var industry of industries) {
     if (industry.className === ID) {
        showElement(industry);
     }
    else {
        hideElement(industry);
    }
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<a href="#" onclick="tumu()">All</a> 
<a href="#" onclick="gizleGoster('health')">Health</a> 
<a href="#" onclick="gizleGoster('technology')">Technology</a>
<a href="#" onclick="gizleGoster('automotive')">Automotive</a><br>

<br>
<br>
<div id="industries">
  <div class="health">health</div><br>
  <div class="technology">technology </div><br>
  <div class="automotive">automotive</div><br>
  <div class="health">health</div><br>
</div>  
  
</body>
</html>

Question 2

Вот один из способов сделать это. Возможно, вам придется настроить его так, как вам нужно, чтобы он соответствовал вашему варианту использования. Обратите внимание, что я также изменил ваш HTML.

function getIndustries() {
    return document.getElementById('industries').getElementsByTagName("div");
}

function hideElement(element){
    element.style.display = "none";
}

function showElement(element) {
  element.style.display = "";
}

function tumu() {
  var industries = getIndustries();
  for(var industry of industries) {
    showElement(industry);
  }
}

function gizleGoster(ID) {
  var industries = getIndustries();
  for(var industry of industries) {
     if (industry.className === ID) {
        showElement(industry);
     }
    else {
        hideElement(industry);
    }
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<a href="#" onclick="tumu()">All</a> 
<a href="#" onclick="gizleGoster('health')">Health</a> 
<a href="#" onclick="gizleGoster('technology')">Technology</a>
<a href="#" onclick="gizleGoster('automotive')">Automotive</a><br>

<br>
<br>
<div id="industries">
  <div class="health">health</div><br>
  <div class="technology">technology </div><br>
  <div class="automotive">automotive</div><br>
  <div class="health">health</div><br>
</div>  
  
</body>
</html>

Группы скрывают прицел. логотипы сайтов

1 ответ

Новые вопросы

javascript