将文章存储在javascript变量中

store articles in javascript variables

本文关键字：变量 javascript 文章 存储      更新时间：2023-09-26

所以我有3篇来自当地报纸的文章，我想让用户点击一个按钮，页面的内容就会切换，我第一次点击任何按钮时就写了脚本，它会为我切换内容，但之后点击任何按钮，我都没有结果我的src代码有点像

<div id="banner">
  <div id="nav">
    <ul>
      <li><button onclick="one()">one</button></li>
      <li><button onclick="two()">two</button></li>
    </ul>
  </div>
  <div id="thewholetext">
    <p id="a">
      //an article here
      <p id="b">
        // a 2nd article here
  </div>
</div>

java脚本类似

function one () {
    document.getElementById("thewholetext").innerHTML = a.innerHTML;
}
function two() {
    document.getElementById("thewholetext").innerHTML = b.innerHTML;
}

这个想法是我有一个名为"整个文本"的div，它包含两篇文章，每篇文章都有唯一的id，这样当用户单击相应的按钮时，我就可以控制并显示其中一篇我希望它是清楚的。提前感谢

<html>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<style>
p{
display:none;
}
</style>
<script>
$(document).ready(function(){
$("button").on("click",function(e){
$("p").hide();
$("p#"+this.id).show();
});
});
</script>
<body>
<div id="nav">
    <ul>
        <li><button id="one">one </button> </li>
         <li><button id="two">two </button> </li>
    </ul>
</div>
      <div id="thewholetext">
<p id="one">
    //an article here
  </p>
  <p id="two">
    // a 2nd article here
  </p>

</div>
</div>
</body>
</html>

试着像这个一样声明你的函数

$("button").click(function(e) {
  if (e.target.id == "one") {
    $("#a").show();
    $("#b").hide();
  } else {
    $("#a").hide();
    $("#b").show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
  <ul>
    <li>
      <button id="one">one </button>
    </li>
    <li>
      <button id="two">two </button>
    </li>
  </ul>
</div>
<div id="thewholetext">
  <p id="a" style="display:none;">
    //an article here
  </p>
  <p id="b" style="display:none;">
    // a 2nd article here
  </p>
</div>

希望有帮助：）

// Cache buttons and articles
var buttons = document.querySelectorAll("[data-showid]"),
    allArticles = document.querySelectorAll(".article");
function toggleArticle(event) {
  event.preventDefault(); // Prevent document scrollTop
  var id = this.dataset.showid,
      article = document.getElementById( id );
  
  [].forEach.call(allArticles, function( art ) {
    art.style.display = art === article ? "block" : "none";
  });
  
}
// Button clicks
[].forEach.call(buttons, function( btn ) {
  btn.addEventListener("click", toggleArticle, false);
});
.hidden{display:none;}
[data-showid]{ color:red; cursor:pointer; }
<a data-showid="article1">One</a>
<a data-showid="article2">Two</a>
<p id="article1" class="article">This is article ONE</p>
<p id="article2" class="article hidden">This is article TWO</p>

相关文章：