-1

我有一个有 5 个按钮的 CSS 脚本。

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

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

4

3 回答 3

0

我猜这个？

<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 使它们看起来像按钮（边框、背景等）

于 2013-01-11T08:11:04.110 回答
0

试试这个：

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/

于 2013-01-11T08:21:22.107 回答
0

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

<!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-11T08:38:13.290 回答