在javascript变量中存储文章

-3

所以我有3篇文章来自本地报纸，我希望用户点击一个按钮和页面切换的内容，我第一次写我的脚本，我点击任何按钮它将切换内容对于我，但之后点击任何按钮时，我没有得到任何结果我SRC的代码是一样的东西在javascript变量中存储文章

<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; 

}

的想法是我有叫格“的全文“，其中每篇文章都包含两篇独特的文章身份证，所以我可以控制和显示，当用户单击其相应的按钮时，只有其中一个我希望它清楚。在此先感谢

来源

2016-07-25 Mohamed Kira

你为什么要把b的html存入一个？ – epascarello

你是说在功能上？对不起，我错了我只是编辑它 –

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

来源

2016-07-25 12:28:20 Ray

试图声明你的函数类似这样的

$("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>

希望它能帮助:)

来源

2016-07-25 11:57:54 Thinker

没有足够的jQuery。另外JavaScript应该帮助我们编写更少的代码。我们的JS（jQuery）逻辑中的硬编码ID不是首选的方式。 –

// 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>

来源

2016-07-25 12:02:49

在javascript变量中存储文章

回答

相关问题