Показать сообщение отдельно
  #1 (permalink)  
Старый 03.09.2014, 12:24
Аспирант
Отправить личное сообщение для Webtest Посмотреть профиль Найти все сообщения от Webtest
 
Регистрация: 10.06.2014
Сообщений: 63

Как сделать так, тобы при нажатии на div содержание текстового документа появлялось?
Пхп код сканирует папку на текстовые документы и выводит названия текстовых документов снизу - во "вкладках".
Как сделать спомощью JS так, чтобы при нажатии на "вкладку" (div) содержание текстового документа показывалось в текстовом поле - <textarea name="content">Открытая вкладка</textarea>?
А так же, если бы я нажал кнопку "свернуть", то текст просто стирался с тестового поля, а если я бы нажимал кнопку "закрыть", то удалялся текстовый файл из папки.
В яваскрипте я нуб.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="Style.css">
</head>
<body>
	<table>
		<tr>
			<td class="capLeft">
				<form action="" method="post">
					<input type="text" name="url" value="http://">
					<input type="Submit" value="Открыть" name="open" id="open">
			</td>
			<td class="capRight">
					<input type="Submit" value="Свернуть" name="collapse" id="collapse">
					<input type="Submit" value="Закрыть" name="close" id="close">
				</form>
			</td>
		</tr>		
		<tr>
			<td class="content" colspan="2">
				<textarea name="content">Открытая вкладка</textarea>
			</td>
		</tr>		
		<tr>
			<td class="tab" colspan="2">
				<?php
					foreach ($scanTabs as $key => $value) {
						if ($value != '.' && $value != '..') {
							echo '<div class="divTab">' . $value . '</div>';
						}
					}
				?>
			</td>
		</tr>

	</table>
</body>
</html>
<script type="text/javascript">

</script>


Вот ЦСС:
Код:
* {
    padding: 0px;
    margin: 0px;
}

table {
    border-collapse: collapse;
    width: 600px;
    margin: auto;
}

td {
    border: 1px solid black;
}

td.capLeft {
    /*height: 25px;*/
    text-align: left;
    padding-left: 7px;
    border-right: none;
}
td.capRight {
    /*height: 25px;*/
    text-align: right;
    padding-right: 7px;
    border-left: none;
}
td.content {
    height: 200px;
    text-align: center;
    word-wrap: break-word;
}
td.content textarea {
    height: 200px;
    width: 600px;
}
td.tab {
    height: 25px;
    text-align: left;
    /*padding-left: 10px;*/
}
div.divTab {
    margin: 5px;
    border: 1px solid black;
    display: inline-block;
    cursor: pointer;
}
div.divTab:hover {
    background-color: #f4f4f4;
}
.selected {
    background-color: #dcdcdc;
}
Ответить с цитированием