Как загрузить файл на одну страницу? [закрыт]

149

30 октября 2019, 06:50

Дико извиняюсь, я в этом новичок... В общем, у меня есть сайт бар, в нем есть кнопки, как сделать так, чтобы при нажатии на допустим кнопку 'Города' В основной части сайта появились фото, или же какая-то статья о городах, НО! сайт бар или же меню, не менялись и оставались на том же месте?

Вот на фото у меня кнопка - 'Города' Я хочу что бы когда нажимала на неё, в это же окно загружался еще один файл с темой города. Но эта кнопка, оставалась на месте... Извиняюсь за такие долгие написания, я и вправду в этом новичок и правильно высказаться не могу, кот знает как это делаеться, буду ооочень благодарна.

Answer 1

Про загрузку данных с сервера Вам уже ответ дали. А если все данные у Вас на клиенте, и Вам надо просто по клику на тот или иной пункт меню отображать разный контент, то можно использовать вкладки (tabs):

input { 
  display: none; 
} 
label { 
  display: inline-block; 
  padding: 5px 10px; 
  margin: 15px; 
  box-shadow: 1px 2px 5px gray; 
  border-radius: 5px; 
  cursor: pointer; 
  transition: .3s; 
} 
label:hover { 
  box-shadow: none; 
} 
.strany, 
.goroda, 
.ulitsy { 
  display: none; 
  border: 2px solid black; 
  padding: 25px; 
} 
#strany:checked ~ .strany, 
#goroda:checked ~ .goroda, 
#ulitsy:checked ~ .ulitsy { 
  display: block; 
}

<input type="radio" name="radio" id="strany" /><label for="strany">СТРАНЫ</label> 
<input type="radio" name="radio" id="goroda" /><label for="goroda">ГОРОДА</label> 
<input type="radio" name="radio" id="ulitsy" /><label for="ulitsy">УЛИЦЫ</label> 
 
<div class="strany"> 
Здесь статья про страны 
</div> 
 
<div class="goroda"> 
Тут картинка с городами 
</div> 
 
<div class="ulitsy"> 
А в этом блоке что-то про улицы 
</div>

Answer 2

Если вам нужно грузить данные с сервера, то воспользуйтесь ajax

let rout = [{Name: "Главная", View: "main"}, {Name: "Города", View: "city"}]; 
$("nav button").click(function(){ 
  rout.forEach(el => { 
    if (el.Name == $(this).text()){ 
      $("#"+el.View).css("display","block"); 
    } 
    else 
      $("#"+el.View).css("display","none"); 
  }); 
});

nav ul li{ 
  display:inline; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<nav> 
<ul> 
  <li><button>Главная</button></li> 
  <li><button>Города</button></li> 
</ul> 
</nav> 
<section id="main"> 
<h1>Приветствую на моем сайте</h1> 
</section> 
<section id="city" style="display:none;"> 
<ul> 
<li>Москва</li> 
<li>Киев</li> 
<li>Одесса</li> 
</ul> 
</section>