замена html текста без перезагрузки страницы - HTML и CSS

designer999 · 15.02.2011, 19:28

Здравствуйте
написал в этот раздел так как не определил к java или к php єто относится
вот моя страничка и в ней табличка в которую погружается текст с файлов heder.php, left_block.php , text.php, footer.php

Код HTML:

..........
<table width="990" border="0" align="center"><tr><td width="745" colspan="4" rowspan="2"><table width="990" border="0" align="center">
  <?php
include("heder.php");
?>
  <tr>
    <td height="10"></td>
    <td height="10" colspan="4"></td>
  </tr>
  <tr>
    <td width="199" height="429" valign="top" ><?php include("left_block.php") ?>    </td>
    <td width="745" colspan="4" rowspan="2" valign="top">
    <?php include("text.php") ?>  
    </td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <?php include("footer.php") ?>
</table>  <table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#BCE4FD"><tr></tr>
</table></td>
  </tr>
</table>
.........

и есть у меня например 5 ссылок:

Код HTML:

<a href="text1">text1</a></td>
<a href="text2.php">text2</a></td>
<a href="text3.php">text3</a></td>
<a href="text4.php">text4</a></td>
<a href="text5.php">text5</a></td>

как можно по нажатию на ссылку text1, сменить html текст text.php на странице например на текст файла text1.php без перезагрузки страницы, очень буду благодарен за помощь

Rayled · 15.02.2011, 20:53

Ну Java и PHP все ж серверные языки, так что без перезагрузки страницы вряд ли возможно. А вот JavaScript вполне подойдет, только все ж не так, как вы планируете.
Придется на странице сразу размещать и text.php и text1.php, просто содержимое одного скрывать до поры до времени,
А потом написать на JavaScript функцию, чтобы по событию onClick() на ссылке, менялись значения в CSS. Кстати, можно и вообще без ссылок, короче вот:

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>____________</title>
  <style type="text/css">
   #wrap, #one, #two {
    position:absolute;
    width:200px;
    height:200px;
    background:#fff;
    border:1px red solid;
   }
   #two {
    display:visible;
   }
  </style>
  <script type="text/javascript">
   function change() {
    var a=document.getElementById('two');
    a.style.display='none';
   }
  </script>
 </head>
 <body>
  <p onClick='change()'>Жми</p>
  <div id="wrap">
   <div id="one">Первый</div>
   <div id="two">Второй</div>
  </div>
 </body>
</html>

designer999 · 15.02.2011, 21:03

ну вот сделал вот так

Код HTML:

<script type='text/javascript'>
    function change(){
        document.getElementById('text').innerHTML =document.getElementById('text2').innerHTML;
    }
</script>
<div id='text2' style='width: 1px; height: 1px; visibility: hidden'>Второй текст</div>
<p></p>
<a href='#' onclick='change()'>Сменить текст</a>
<p></p>
<div id='text'>Начальный текст страницы</div>

всё работает, но остался один вопрос что вместо document.getElementById('text2').in nerHTML можно подставить, что бы грузилось из файла text.html ?

15.02.2011, 19:28	#1
designer999 Форумчанин Регистрация: 16.02.2010 Сообщений: 187	замена html текста без перезагрузки страницы Здравствуйте написал в этот раздел так как не определил к java или к php єто относится вот моя страничка и в ней табличка в которую погружается текст с файлов heder.php, left_block.php , text.php, footer.php Код HTML: .......... <table width="990" border="0" align="center"><tr><td width="745" colspan="4" rowspan="2"><table width="990" border="0" align="center"> <?php include("heder.php"); ?> <tr> <td height="10"></td> <td height="10" colspan="4"></td> </tr> <tr> <td width="199" height="429" valign="top" ><?php include("left_block.php") ?> </td> <td width="745" colspan="4" rowspan="2" valign="top"> <?php include("text.php") ?> </td> </tr> <tr> <td></td> </tr> <?php include("footer.php") ?> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#BCE4FD"><tr></tr> </table></td> </tr> </table> ......... и есть у меня например 5 ссылок: Код HTML: <a href="text1">text1</a></td> <a href="text2.php">text2</a></td> <a href="text3.php">text3</a></td> <a href="text4.php">text4</a></td> <a href="text5.php">text5</a></td> как можно по нажатию на ссылку text1, сменить html текст text.php на странице например на текст файла text1.php без перезагрузки страницы, очень буду благодарен за помощь

15.02.2011, 20:53	#2
Rayled Пользователь Регистрация: 23.01.2011 Сообщений: 28	Ну Java и PHP все ж серверные языки, так что без перезагрузки страницы вряд ли возможно. А вот JavaScript вполне подойдет, только все ж не так, как вы планируете. Придется на странице сразу размещать и text.php и text1.php, просто содержимое одного скрывать до поры до времени, А потом написать на JavaScript функцию, чтобы по событию onClick() на ссылке, менялись значения в CSS. Кстати, можно и вообще без ссылок, короче вот: Код HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>____________</title> <style type="text/css"> #wrap, #one, #two { position:absolute; width:200px; height:200px; background:#fff; border:1px red solid; } #two { display:visible; } </style> <script type="text/javascript"> function change() { var a=document.getElementById('two'); a.style.display='none'; } </script> </head> <body> <p onClick='change()'>Жми</p> <div id="wrap"> <div id="one">Первый</div> <div id="two">Второй</div> </div> </body> </html>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Замена текста в html	Sheva-roller	JavaScript, Ajax	2	23.01.2011 22:03
Поиск и замена в HTML-коде страницы загруженной в TWebBrowser	iiunbreakableii	Общие вопросы Delphi	4	01.01.2011 07:54
скрипт скрытия / отображения текста без перезагрузки (не работает в опере)	vlad007	JavaScript, Ajax	12	10.11.2009 13:08
Форум без перезагрузки страницы. Как все собрать в едино?	Web-Gangsta	JavaScript, Ajax	15	07.05.2009 00:32
Динамическое изменение URL страницы в JavaScript без перезагрузки страницы	ilusha	JavaScript, Ajax	7	25.02.2009 09:59