В теге привязки я хочу показать 2 div - PullRequest
Новая
       2

В теге привязки я хочу показать 2 div

0 голосов
/ 25 мая 2018

при нажатии на элемент привязки.2 элемента div с их содержимым должны отображаться (например, от скрытого к видимому).

Так что это мой код, что я делаю, но ничего не работает, помогите, пожалуйста. Как это сделать. 

<div>     
  <a href="#one #onesection" class="parentclass">One</a>
<div>
<div id="one" class="childclass"></div>
<div id="onesection" class="subchildclass">this is mysection first</div>

Один из моих друзей помог мне с этим решением, но ничего не работает: - 

<a class="parentclass" onClick="openDivs()">One</a>
function openDivs() {
  let child = document.getElementById('one');
  let subChild = document.getElementById('onesection');
}

В этом я получил синтаксическую ошибку в let, а также она не работает, пожалуйста, проверьте и скажите мне, как решить эту проблему.Где я не прав Большое спасибо заранее.

Ответы [ 4 ]

0 голосов
/ 25 мая 2018
function openDivs (e) {$ (e.getAttribute ('href')). show ();} 
 <div>     
 <a onclick="openDivs(this)" href="#one,#onesection" class="parentclass">One</a>
 <div>
 <div id="one" class="childclass" style="display:none">ttttt</div>
 <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
</div>
0 голосов
/ 25 мая 2018

@ сумасшедшая попытка с приведенным ниже решением 

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
           $(".parentclass").click(function(){
               $('.childclass').hide();
               $('.subchildclass').hide();
               var parentID = $(this).parent().prop("id");
               $("#" + parentID + " .childclass").show();
               $("#" + parentID + " .subchildclass").show();
           });
        });
    </script>
</head>
<body>
    <div id="section1">     
        <a class="parentclass" href="#">One</a>
        <div>
            <div class="childclass" style="display:none">hiiiii1</div>
            <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
        </div>
    </div>
    <div id="section2">     
        <a href="#" class="parentclass">two</a>
        <div>
            <div class="childclass" style="display:none">hiiiii2</div>
            <div id="onesection" class="subchildclass" style="display:none">this is mysection second</div>
        </div>
    </div>  
    <div id="section3">     
        <a href="#" class="parentclass">three</a>
        <div>
            <div class="childclass" style="display:none">hiiiii3</div>
            <div id="onesection" class="subchildclass" style="display:none">this is mysection Third</div>
        </div>
    </div>
</body>
</html>
0 голосов
/ 25 мая 2018

Попробуйте, это чистый JavaScript. 

function openDivs()
{
    document.getElementById("one").style.display="Block";
    document.getElementById("onesection").style.display="Block";
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>
 <div>     
     <a onclick="openDivs()" class="parentclass">One</a>
     <div>
     <div id="one" class="childclass" style="display:none">hiiiii</div>
     <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
    </div>
    </div>
</body>
</html>
0 голосов
/ 25 мая 2018

Вы можете использовать .show () в jquery для отображения скрытых html-элементов.Здесь два div должны быть изначально скрыты, т.е. когда страница загружена.Вот ваша html часть 

<html>
  <div id="outer_container">

    <div class="main_parent" id="parent1">     
         <a class="parentclass" >One</a>
         <div>
           <div id="one" class="childclass" style="display:none">hiiiii</div>
           <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
        </div>
    </div>

    <div class="main_parent" id="parent2">     
      <a class="parentclass">two</a>
      <div>
         <div id="one" class="childclass" style="display:none">hiiiii</div>
         <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
      </div>
    </div>


    <div class="main_parent"  id="parent3">     
       <a class="parentclass">three</a>
       <div>
         <div id="one" class="childclass" style="display:none">hiiiii</div>
         <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
      </div>
    </div>

  </div>
</html>

Вот ваш скрипт / jQuery часть 

jQuery(document).ready(function($) {
    $('.parentclass').click(function(event){
      var clicked_id = $(this).closest('.main_parent').attr('id');
        $('#'+clicked_id).find('#one,#onesection').show();
        $('#outer_container').find('.main_parent:not(#'+clicked_id+')').find('#one,#onesection').hide();
    });
});

Также есть некоторая ошибка.Вы не закрываете первый <div>, в котором размещен тег привязки.

Вот updated jsfiddle: https://jsfiddle.net/melvinstanly/g8am7owh/19/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...