Задать вопрос
lrik64
@lrik64
Начинающий программист
html

Как сделать открытые страницы не в отдельную вкладку,а в область начальной страницы?

Здравствуйте,сделал сайт но с одной деталью оказались сложности,а конкретнее с открытием новой страницы,сейчас по щелчку по пункту меня новая страница открывается в отдельной вкладке, а нужно что бы она открывалась в "Контентной области ".Помогите пожалуйста!Сам никак не могу реализовать.
Вот код:
Начальная страница() :
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>ТСЖ "Пробуждение"</title>
  <link rel="stylesheet" href="D:\Winginx\home\localhost\public_html\Ignatjev\style.css" type="text/css" />
  <link rel="shortcut icon" href="\Ignatjev\Images\logo.png" type="image/x-icon">

</head>
<body>
    <!-- Основной блок сайта -->
    <div id="basic">
      <!-- Шапка сайта -->
        <div id="head-site">
            <a href="\Ignatjev\index.php"><img src="\Ignatjev\Images\logo.png" alt="ТСЖ Пробуждение"" title= " ТСЖ Пробуждение " /></a>
            <img src= "\Ignatjev\Images\tel.png" alt="+7 (986) 987-26-65" title="+7 (986) 987-26-65" class="telefon" /> <p  class = "telefon" align = "right" style=" color :#8fbc8f" >+7 (986) 987-26-65 </p>
        </div>
		<!-- Верхнее меню сайта -->
    <div id="menu-top">
        <div class="bg-1">
            <ul>
            <li><a href="\Ignatjev\o-tsj.html">О ТСЖ</a></li>
            <li><a href="\Ignatjev\Documents.html">Документация</a></li>
            <li><a href="\Ignatjev\requisites.html">Реквизиты</a></li>
            <li><a href="\Ignatjev\as.html">АС</a></li>
            <li><a href="\Ignatjev\pokazaniya.html">Передача показаний счётчика</a></li>
            <li><a href="\Ignatjev\contacts.html">Контакты</a></li>
            </ul>
        </div>
        <div class="bg-2"></div>
    </div>
	 <!-- Левое меню и Контент -->
        <div id="content">
		<!-- Контент - правый блок -->
        <div class="right">
                <h1>ТСЖ "Пробуждение"</h1>
                <p> Данный сайт ТСЖ создан и заполнен  в  соответствии со : "Стандартом раскрытия информации организациями, осуществляющими деятельность в сфере управления многоквартирными домами" (в ред. Постановлений Правительства РФ от 10.06.2011 № 459, от 06.02.2012 № 94),согласно которому на сайте должна быть раскрыта следующая информация:</p>
 <ul>
<li> общая информация о товариществе </li>
<li> основные показатели финансово-хозяйственной деятельности товарищества </li>
<li> сведения о выполняемых работах (оказываемых услугах) по содержанию и ремонту общего имущества в многоквартирном доме </li>
<li> порядок и условия оказания услуг по содержанию и ремонту общего имущества в многоквартирном доме </li>
<li> сведения о стоимости работ (услуг) по содержанию и ремонту общего имущества в многоквартирном доме </li>
<li> сведения о ценах (тарифах) на коммунальные ресурсы </li>
<li> размещены копии уставных документов. </li>
        </div>
             
        <!-- Левое меню - левый блок  -->
        <div class="left">
            <div id="left-menu">
                <div class="block-nad-menu"></div>
                <div class="block-menu">
                <ul>
                <li><a href="\Ignatjev\reception-days.html">Дни приема</a></li>
                <li><a href="#">Новости дома</a></li>
                <li><a href="#">Собрания правления</a></li>
                <li><a href="#">Собрания собственников</a></li>
                <li><a href="#">Капитальный ремонт</a></li>
                <li><a href="\Ignatjev\svyaz.html">Обратная связь</a></li>
                              </ul>
                </div>
            <div class="block-pod-menu"></div>
            </div>
		 </div>
    </div>
	<div class="myclr"></div>
         
        <!-- Подвал -->
        <div id="podval">
            <div class="yellow"></div>
            <div class="p1">ТСЖ “Пробуждение” 2019г.<br/>
            г. Саратов, ул Лебедева-Кумача 70Д</div>
           
        </div>
        <div class="myclr"></div>
</body>
</html>

2 страница :
<html>
<head>
<!-- <form action="test.php" method="POST">-->

<title>ТСЖ "Пробуждение"</title>
  <link rel="stylesheet" href='\Ignatjev\style.css' type="text/css" />
  <link rel="shortcut icon" href="\Ignatjev\Images\logo.png" type="image/x-icon">
</head>

<body> 
<h1 align = "middle">Передайте показания</h1>
<p>Используя данную форму, Вы можете отправить нам текущие показания своих счетчиков.</p>
<!-- <form action="test.php" method="POST"> -->
<form action="bd.php" method="POST" >
<p>ФИО отправителя (обязательно)<br />
<input type="text" name="your_name" required placeholder="Обязательное поле" value="" size="40" aria-required="true" /></p>
<p>Контактный телефон (обязательно)<br />
<input type="tel" name="contactnumber" required placeholder="Обязательное поле" value="" size="40"  aria-required="true" aria-invalid="false" /> </p>
<p>Номер квартиры (обязательно)<br />
<input type="number" name="apartment" required placeholder="Обязательное поле" value="" size="40"  aria-required="true" aria-invalid="false" /> </p>
<p>Холодная вода<br />
<input type="number" name="coldwater" value="0" size="40"  aria-invalid="false" /> </p>
<p>Горячая вода<br />
<input type="number" name="hotwater" value="0" size="40"  aria-invalid="false" /> </p>
<p>Электричество<br />
<input type="number" name="electricity" value="0" size="40"  aria-invalid="false" /> </p>
<p>Газ<br />
<input type="number" name="gas" value="0" size="40"  aria-invalid="false" /> </p>
<p>Отопление<br />
<input type="number" name="heating" value="0" size="40"  aria-invalid="false" /> </p>
<p><input type="submit" value="Отправить"  /></p>
<input type="button" value="Вернутся на главную" onclick="location.href='index.php';" />

</form>

3 страница
<html>
<head>
<title>ТСЖ "Пробуждение"</title>
  <link rel="stylesheet" href='\Ignatjev\style.css' type="text/css" />
    <link rel="shortcut icon" href="\Ignatjev\Images\logo.png" type="image/x-icon">
</head>
<body>
<h1><p align = "middle">Контакты</h1></p>
<p>410018, Саратов, ул. Лебедева-Кумача,дом 70 Д</p>

<p>Диспетчер ТСЖ +7-951-883-16-72 (с 8-00 до 17-00 час.)</p>

<p>Офис ТСЖ +7 (8452 ) 79-24-21 (с 8-00 до 17-00 час.)</p>

<p>График работы офиса ТСЖ «Пробуждение»</p>

<p>Понедельник-четверг 08.00 — 17.00 час.</p>

<p>Пятница 08.00 — 16.00 час.</p>

<p>Перерыв 12.00 — 13.00 час.</p>

<p>tsg-uk3@list.ru</p>

<p>Заявления от жильцов можете опускать в ящик ТСЖ «Пробуждение» в любое время.</p>
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Aca827cbfb46ba2c0df4bb07b09171e5b19d6d99a2d2898375ed346cda340a41b&amp;width=458&amp;height=400&amp;lang=ru_RU&amp;scroll=true"></script>
<p></p>
<input type="button" value="Вернутся на главную" onclick="location.href='index.php';" />
</body>
</html>

И стилистика сайта:
body {padding:0px; margin:0; background:#8fbc8f; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#a8e4a0;}
a:hover {text-decoration:none;}
li.none-bg {background:none!important;}
.telefon {float:right;}
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#8fbc8f  repeat-x; padding:0 0 0 10px;}
.bg-2 {width:940px; height:8px; background:#a8e4a0; margin:0 auto;}
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#a8e4a0; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#a8e4a0;}
/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h1 {text-transform:uppercase; color:#8fbc8f; font-weight:normal; margin-top:0;}
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#a8e4a0;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#8fbc8f;}
.block-menu {width:240px; border-left:10px solid #a8e4a0; background:#8fbc8f;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#a8e4a0 url(images/marker.png) no-repeat 10px 8px;}
li.none-bg {background:none!important;}
/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #8fbc8f; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#a8e4a0;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}

И вот непосредственно скрины этих 3 окон.
5cc84767c4ef4469979948.png5cc8477732349270222223.png5cc8478b7819a267160991.png
P.S.Пунктов меню больше но по примеру 2-3 страниц думаю смогу сделать дальше сам
  • Вопрос задан
  • 268 просмотров
Комментировать
Подписаться Средний Комментировать
Решения вопроса 1
leni_m
@leni_m
ЧупаКобрус
если подключить jquery то можно так:
<script>
$(function(){
    $('#menu-top a').on('click', function(){
        let url = $(this).attr('href');
         $.ajax({
            type: "POST",
            url: url
        }).done(function(data){
            $("#content").html(data);
        });
        return false;
    })
})
</script>

в блоке с id="content" все содержимое перезапишется на новую страницу, и лучше оставить только то, что внутри body, так как тайтл и боди уже есть на основной странице.
Ответ написан
28 комментариев
28 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Скетч ESP32 + FASTLED
01 мая 2024, в 10:55
2500 руб./за проект
Верстка сайта
01 мая 2024, в 10:55
3000 руб./за проект
Верстка сайта
01 мая 2024, в 10:55
3000 руб./за проект
Ещё заказы