单击链接时在段落中更改文本JQuery / HTML

Question

我试图做一些我认为简单的事情，但似乎无所适从。我有一个带有两个链接的小型导航栏，然后是一个文本区域。我想发生的是，当我单击单击时，文本段落将更改为与之相关的链接。

我在很多事情中都尝试了以下方法（请原谅我已经有一段时间没有使用JQuery或javascript了）它似乎什么都没做！

我愿意寻找新的方法来达到预期的效果。

var ptext;

   $(document).ready(function(){
      ptext = $("#pchange");
      $(".one").click(function(){
        ptext.html("text1");
      });
      $(".two").click(function(){
        ptext.html("tex2");
   
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

h2 {
    color: white;
}

/* Style the header */
header {
    background-color: #2B547E;
    padding: 30px;
    text-align: center;
    font-size: 35px;
    color: white;
}

/* Create two columns/boxes that floats next to each other */
nav {
    float: left;
    width: 30%;
    height: 300px; /* only for demonstration, should be removed */
    background: #43BFC7;
    padding: 20px;
}

/* Style the list inside the menu */
nav ul {
    list-style-type: none;
    padding: 0;
}

article {
    float: left;
    padding: 20px;
    width: 70%;
    background-color: #f1f1f1;
    height: 300px; /* only for demonstration, should be removed */
}

/* Clear floats after the columns */
section:after {
    content: "";
    display: table;
    clear: both;
}

/* Style the footer */
footer {
    background-color: #2B3856;
    padding: 10px;
    text-align: center;
    color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
    nav, article {
        width: 100%;
        height: auto;
    }
}
</style>


<header>
  <h2>Voice of the Theatre</h2>
<img src="http://pngimg.com/uploads/world_map/world_map_PNG14.png" width="100px" height="60px">
</header>

<section>
  <nav>
    <ul>
      <li><a class="one" href="#">EMEAR</a></li>
      <li><a class="two" href="#">AMER</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>London</h1>
    
    <div id="pchange">
    
    </div>
    
<ul>
  <li>Update 1 </li>
  <li>Update 2</li>
  <li>Update 3</li>
</ul>


<h1>America</h1>
<ul>
  <li>Update 1 </li>
  <li>Update 2</li>
  <li>Update 3</li>
</ul>


  
  </article>
</section>

<footer>
  <p></p>
</footer>

Answer 1

您可以从a标签中删除href或添加onPostExecute()，以使链接不再像应有的作用。

如果您只想更改元素的文本内容，请使用event.preventDefault()而不是.text()

.html()

var ptext;

$(document).ready(function() {
  ptext = $("#pchange");
  $(".one").click(function(event) {
    event.preventDefault();
    ptext.text("text1");
  });
  $(".two").click(function(event) {
    event.preventDefault();
    ptext.html("tex2");

  });
});

Answer 2

您可以添加 href =“ javascript：void（0）” 或 event.preventDefault（）或 event.preventDefault（）; > event.stopPropagation（）;您可以选择任何一个。

您的脚本更改了HTML，但是其工作 .html（）或 .text（），但是 .text（）是最好的选择text表示内部文本，html表示other元素。

首先，您单击导航按钮，然后获取此文本并更改目标元素文本。

工作正常...

谢谢

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
        var ptext;

           $(document).ready(function(){
              ptext = $("#pchange");
              $("nav ul li a").click(function(event){
                ptext.html($(this).text());
              });
             
            });
    </script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        h2 {
            color: white;
        }

        /* Style the header */
        header {
            background-color: #2B547E;
            padding: 30px;
            text-align: center;
            font-size: 35px;
            color: white;
        }

        /* Create two columns/boxes that floats next to each other */
        nav {
            float: left;
            width: 30%;
            height: 300px; /* only for demonstration, should be removed */
            background: #43BFC7;
            padding: 20px;
        }

        /* Style the list inside the menu */
        nav ul {
            list-style-type: none;
            padding: 0;
        }

        article {
            float: left;
            padding: 20px;
            width: 70%;
            background-color: #f1f1f1;
            height: 300px; /* only for demonstration, should be removed */
        }

        /* Clear floats after the columns */
        section:after {
            content: "";
            display: table;
            clear: both;
        }

        /* Style the footer */
        footer {
            background-color: #2B3856;
            padding: 10px;
            text-align: center;
            color: white;
        }

        /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
        @media (max-width: 600px) {
            nav, article {
                width: 100%;
                height: auto;
            }
        }
        </style>


        <header>
          <h2>Voice of the Theatre</h2>
        <img src="http://pngimg.com/uploads/world_map/world_map_PNG14.png" width="100px" height="60px">
        </header>

        <section>
          <nav>
            <ul>
              <li><a class="one" href="javascript:void(0)">EMEAR</a></li>
              <li><a class="two" href="javascript:void(0)">AMER</a></li>
            </ul>
          </nav>
          
          <article>
            <h1>London</h1>
            
            <div id="pchange">
            
            </div>
            
        <ul>
          <li>Update 1 </li>
          <li>Update 2</li>
          <li>Update 3</li>
        </ul>


        <h1>America</h1>
        <ul>
          <li>Update 1 </li>
          <li>Update 2</li>
          <li>Update 3</li>
        </ul>


          
          </article>
        </section>

        <footer>
          <p></p>
        </footer>