TransWikia.com

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

Stack Overflow на русском Asked by Andrey Sindeev on August 13, 2020

Всем привет, возможно вопрос и глупый но никак не могу понять одну вещь.
вот пример 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 блока с другим текстом к примеру.

  • One Answer

    $('.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>

    Answered by Ilia Brykin on August 13, 2020

    Add your own answers!

    Ask a Question

    Get help from others!

    © 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP