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 блока с другим текстом к примеру.

    jquery

    • 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!

    Recent Questions

    Recent Answers

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