Question

我有一个CSS脚本，它有5个按钮。

单击第一个按钮应在固定区域的同一页面上显示文本（可能通过使用框架或编写隐藏的功能，然后执行show()）。

如果单击第二个按钮，则某些其他文本应显示在较早的区域中。同样适用于其他按钮。这样做最有效的方法是什么？（实现最快的页面加载）。

Answer 1

我猜这个？

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

然后添加一些CSS使它们看起来像按钮（边框，背景等）

Answer 2

试试这个：

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>

使用Javascript：

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

您可以在以下位置查看此操作：http://jsfiddle.net/Wnw7X/

Answer 3

好的，这是一个完整的演示 - 复制所有代码并粘贴您的编辑器。然后跑。

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

html中按钮的单击行为

3 个答案: