-1

5 つのボタンを持つ CSS スクリプトがあります。

最初のボタンをクリックすると、同じページの固定領域にテキストが表示されます (フレームを使用するか、非表示の関数を作成してからshow().

2 番目のボタンをクリックすると、他のテキストが前の領域に表示されます。他のボタンも同様。これを行う最も効率的な方法は何でしょうか? （ページの最速の読み込みを実現します）。

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

OK、これが完全なデモです。すべてのコードをコピーして、エディタを貼り付けてください。そして走る。

<!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 に答える
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 に答える