скрыть/показать текст с помощью jquery

200

02 июня 2018, 02:20

Всем привет, возможно вопрос и глупый но никак не могу понять одну вещь. вот пример html.

$('#nav_py').on('mouseenter', function() { 
  $('#test').text('TEST'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<header> 
  <nav class="animatedBlocks"> 
    <ul id="navbar"> 
 
      <li class="filter active" id="nav_py"> 
        <h2>Python</h2> 
      </li> 
 
      <li class="filter" id="nav_js"> 
        <h2>JS and Jquery</h2> 
      </li> 
 
      <li class="filter" id="nav_html"> 
        <h2>HTML</h2> 
      </li> 
 
      <li class="filter" id="nav_css"> 
        <h2>CSS</h2> 
      </li> 
 
      <li class="filter active" id="nav_qa"> 
        <h2>QA</h2> 
      </li> 
 
      <li class="filter" id="nav_hobbies"> 
        <h2>Hobbies</h2> 
      </li> 
 
    </ul> 
  </nav> 
  <div class="center" id="test"> 
    <p class="tests">text text text text text text text text text 
    </p> 
  </div>

Список который я сделал внутри отвечает за боковую панель(небольшое меню) С помощью JQuery я пытаюсь сделать следующее, при наведении курсора мыши на один из

у меня должен меняться текст внутри блока . Для тренировки я написал немного кода на JS в связке с JQuery.

я понял как благодаря методу text() задавать нужный текст внутри указанного блока, но не нашёл каким методом воспользоваться для смены всего div блока с другим текстом к примеру.

Answer 1

$('.filter').on('mouseenter', function(){ 
  var text = $(this).children().text(); 
   $('#test .tests').text(text);   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<header> 
    <nav class="animatedBlocks"> 
        <ul id="navbar"> 
 
            <li class="filter active" id="nav_py"> 
                <h2>Python</h2> 
            </li> 
 
            <li class="filter" id="nav_js"> 
                <h2>JS and Jquery</h2> 
            </li> 
 
            <li class="filter" id="nav_html"> 
                <h2>HTML</h2> 
            </li> 
 
            <li class="filter" id="nav_css"> 
                <h2>CSS</h2> 
            </li> 
 
            <li class="filter active" id="nav_qa"> 
                <h2>QA</h2> 
            </li> 
 
            <li class="filter" id="nav_hobbies"> 
                <h2>Hobbies</h2> 
            </li> 
 
        </ul> 
    </nav> 
    <div class="center" id="test"> 
        <p class="tests">text text text text text text text text text  
        </p> 
    </div> 
</header>