자바 스크립트 변수에 기사를 저장합니다

-3

로컬 신문에서 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>

및 자바 스크립트 같은 아이디어는 내가 전화 사업부를 가지고있다

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

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

}

비슷하다 "는 전체 텍스트 "두 개의 기사가 들어있는 각 기사는 고유합니다 ID 그래서 나는 사용자가 해당 버튼을 클릭 할 때 그 중 하나만을 제어하고 표시 할 수 있습니다. 나는 그것의 명확한 희망을 가지고 있습니다. 사전에 감사

출처

2016-07-25 Mohamed Kira

왜 b의 html을 a에 저장하고 있습니까? – 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>

희망이

$("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 12:28:20 Ray

시도는 도움이 :)

출처

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

자바 스크립트 변수에 기사를 저장합니다

답변

관련 문제