Переключить div с тем же идентификатором через JS

Question

Ниже приведен мой код. Мое требование - скрыть все div по умолчанию через JS. А при нажатии на ссылку должен открываться соответствующий div с таким же идентификатором.

<ul class="links">
    <li><a href="#search">Search</a></li>
    <li><a href="#del">Share</a></li>
</ul>

<div id="search" class="search">
    <input type="search" placeholder="Search" />
</div>

<div id="del" class="del">
    Share me
</div>

$(document).ready(function() {   
    $("ul.links li a").on("click", function(e) { 
        e.PreventDefault; 
        var grabID = $(this).attr( "href" );                                
        $('div' + grabID).toggleClass("hide");
        $("div").not('div' + grabID).addClass("hide");
    });
});

Answer 1

На самом деле вообще не нужно javascript для этого, если вы хотите, чтобы только последняя ссылка была открытой:

div { display: none; }
div:target {display:block}

<ul class="links">
    <li><a href="#search">Search</a></li>
    <li><a href="#del">Share</a></li>
</ul>

<div id="search" class="search">
    <input type="search" placeholder="Search" />
</div>

<div id="del" class="del">
    Share me
</div>

Вот решение jquery:

$(document).on('click','.links a',function(e){
  e.preventDefault();
  var href = $(this).attr('href');
  $('div').hide();
  $(href).show();
});

div {display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
    <li><a href="#search">Search</a></li>
    <li><a href="#del">Share</a></li>
</ul>

<div id="search" class="search">
    <input type="search" placeholder="Search" />
</div>

<div id="del" class="del">
    Share me
</div>

Answer 2

Здесь вы go с использованием чистого раствора JavaScript

document.getElementById("search").classList.add("hide");
document.getElementById("del").classList.add("hide");

function clickMethod(e) {
  var id = e.getAttribute("href").replace("#", "");
  document.getElementById(id).classList.toggle("hide");
}

.hide {
  display: none;
}

<ul class="links">
    <li><a href="#search" onclick="clickMethod(this)">Search</a></li>
    <li><a href="#del" onclick="clickMethod(this)">Share</a></li>
</ul>

<div id="search" class="search">
    <input type="search" placeholder="Search" />
</div>

<div id="del" class="del">
    Share me
</div>

Определите имя класса hide, которое поможет вам скрыть элемент, а затем используйте метод toggle для переключения класса.

Надеюсь, это поможет вам

Answer 3

Вы можете решить эту проблему, просто добавив класс hide ко всем целям, например,

$('.search, .del').addClass("hide");
$("ul.links li a").on("click", function(e) {
  e.preventDefault();
  var grabID = $(this).attr("href");  
  $('div' + grabID).toggleClass("hide");
  $("div").not('div' + grabID).addClass("hide");
});

.hide{display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
  <li><a href="#search">Search</a></li>
  <li><a href="#del">Share</a></li>
</ul>
<div id="search" class="search">
  <input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
  Share me
</div>

Answer 4

Скройте все свои div'ы при загрузке вашего документа. И просто покажите соответствующий div при нажатии на ссылку.

см. Рабочую скрипку-

$(document).ready(function() { 
    $("div").hide();
    $("ul.links li a").on("click", function(e) { 
        e.PreventDefault; 
        var grabID = $(this).attr( "href" );   
        $('div').hide();
        $('div' + grabID).show();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
    <li><a href="#search">Search</a></li>
    <li><a href="#del">Share</a></li>
</ul>

<div id="search" class="search">
    <input type="search" placeholder="Search" />
</div>

<div id="del" class="del">
    Share me
</div>