HTML의 버튼을 클릭 할 때의 동작

-1

5 개의 버튼이있는 CSS 스크립트가 있습니다.HTML의 버튼을 클릭 할 때의 동작

첫 번째 단추를 클릭하면 같은 페이지에 고정 된 영역의 텍스트가 표시됩니다 (프레임을 사용하거나 숨겨진 기능을 작성한 다음 show()을 입력).

두 번째 단추를 클릭하면 이전 영역에 다른 텍스트가 나타납니다. 다른 버튼과 비슷합니다. 이 일을하는 가장 효율적인 방법은 무엇입니까? (페이지의 가장 빠른 로딩 달성).

출처

2013-01-11 Gordon

당신이 탭 뭔가를 시도 할 수 : http://jqueryui.com/tabs/ –

내가 텍스트의 배열을 만들고있는 텍스트 – Gordon

를 표시하는 지표로 버튼 ID를 사용하여 같은 끔찍한 일을 할 거라고를 동일한 gareths 대답 아래에 – Gordon

처럼 보이게하기 위해 일부 CSS를 추가하려면이 시도 :

HTML

<div id="textcontainer"></div> 
<button id="button1" onclick="setText(0);">Button 1</button> 
<button id="button2" onclick="setText(1);">Button 2</button> 
<button id="button3" onclick="setText(2);">Button 3</button> 
<button id="button4" onclick="setText(3);">Button 4</button> 
<button id="button5" onclick="setText(4);">Button 5</button>

자바 스크립트 :

var text = [ 
    'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.', 
    'Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.', 
    'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.', 
    'Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.', 
    'Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.' 
    ]; 

function setText(index){ 
    var box = document.getElementById('textcontainer'); 
    box.innerHTML = text[index]; 
}

당신은 t를 볼 수 있습니다. 그의 행동에 : http://jsfiddle.net/Wnw7X/

출처

2013-01-11 08:21:22

나는 이것으로 추측합니까?

<iframe name="content"></iframe> 
<a href="page1.html" target="content">Button 1</a> 
<a href="page2.html" target="content">Button 2</a> 
And so on...

는 그런 그들을 버튼 (테두리, 배경 등)

출처

2013-01-11 08:11:04

정확히 내가 무엇을 찾고 있습니다. 나는 내 문제를 자세히 설명하려고 노력할 것이다. 나는 다른 곳에서 해결책을 찾기 위해 자신을 찾고 있습니다. – Gordon

글쎄, 당신이 말한 것과 똑같은 일을합니다 ... –

왜? 당신은 가장 간단한 방법을 물었습니다. 내장 된 행동보다 간단 할 수있는 것은 무엇입니까? –

좋아, 여기에 완전한 데모입니다 - 모든 코드를 복사하여 편집기를 붙여 넣습니다. 실행합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript"> 

window.onload = function() { 

var myArray = ['you click the first button', 'you click the second button', 'you click the third button', 'you click the fourth button', 'you click the fifth button']; 

var one = document.getElementById('buttonOne'); 
var two = document.getElementById('buttonTwo'); 
var three = document.getElementById('buttonThree'); 
var four = document.getElementById('buttonFour'); 
var five = document.getElementById('buttonFive'); 

one.onclick = clickHandler; 
two.onclick = clickHandler; 
three.onclick = clickHandler; 
four.onclick = clickHandler; 
five.onclick = clickHandler; 


function clickHandler(evt) { 
    //console.log(evt.target.id); 
    var header = document.getElementsByTagName('h1')[0]; 
    if(evt.target.id === 'buttonOne') { 
     header.innerHTML = myArray[0]; 
       console.log(myArray[0]); 
     console.log('click'); 
    } 
    else if (evt.target.id === 'buttonTwo') { 
     header.innerHTML = myArray[1]; 
    } 
    else if (evt.target.id === 'buttonThree') { 
     header.innerHTML = myArray[2]; 
    } 
    else if (evt.target.id === 'buttonFour') { 
     header.innerHTML = myArray[3]; 
    } 
    else if (evt.target.id === 'buttonFive') { 
     header.innerHTML = myArray[4]; 
    } 
} 

} 
</script> 
</head> 

<body> 
<button id="buttonOne">One</button> 
<button id="buttonTwo">Two</button> 
<button id="buttonThree">Three</button> 
<button id="buttonFour">Four</button> 
<button id="buttonFive">Five</button> 
<h1> </h1> 
</body> 
</html>

출처

2013-01-11 08:38:13

HTML의 버튼을 클릭 할 때의 동작

답변

관련 문제