Блог

Главная - Вопросы по программированию - Загрузка содержимого вкладки навигации на домашней странице

Загрузка содержимого вкладки навигации на домашней странице

#jquery #html #ajax #navbar

#jquery #HTML #ajax #панель навигации

Вопрос:

У меня есть несколько вкладок навигации на моей домашней странице моего приложения. На одной из вкладок есть выпадающие списки. При нажатии на любую вкладку я хочу, чтобы содержимое загружалось на той же странице между верхним и нижним колонтитулами. Все файлы являются внутренними файлами. Как я могу этого добиться, предпочтительно с помощью AJAX jQuery? Также я хотел бы выбрать конкретную вкладку, содержимое которой загружается. Мои фрагменты кода:

 $(document).ready(function() {

  $(".dropdown").mouseenter(function() {
    $("#myDropdown").show();
  });

  $("#myDropdown, .dropdown").mouseleave(function() {
    $("#myDropdown").hide();
  });
});  
 /* This is the stylesheet of the main page index.html. */

#header {
  display: block;
  width: 100%;
  height: 10em;
  margin: 1px 20px 2px 1px;
  border-bottom: 3px red solid;
  background: url("images/body-bg.jpg") -20px repeat-y, url("images/gold.gif") 220px 10px no-repeat, url("images/back.png") 320px 10px no-repeat, url("images/AR.png") 480px 10px no-repeat, url("images/black-horizntal.png");
  background-size: auto, 100px, 150px, 120px, auto;
}
#title {
  text-align: center;
  color: white;
  font-weight: bold;
  font-family: "Arial", Georgia, serif;
  font-size: medium;
  padding-top: 46px;
}
#tabs {
  float: left;
  width: 100%;
  background: none;
  /* border-bottom:4px solid #000; */
  overflow: hidden;
  position: fixed;
}
#tabs ul {
  clear: left;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  left: 50%;
  text-align: center;
}
#tabs ul li {
  display: block;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  right: 50%;
  border: 0.06em solid darkgray;
  font-size: large;
}
#tabs ul li a {
  display: block;
  margin: 0 0 0 1px;
  padding: 3px 10px;
  background: #ddd;
  color: #000;
  text-decoration: none;
  line-height: 1.3em;
}
#tabs ul li a:hover {
  background: #369;
  color: #fff;
}
#tabs ul li a.active,
#tabs ul li a.active:hover {
  color: #fff;
  background: #000;
  font-weight: bold;
}
footer #footer {
  position: absolute;
  border-top: solid 3px red;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: 60px;
}
/* CSS for dropdowns of the "Matrix" tab */

#myDropdown {
  display: none;
}
body {
  overflow: auto;
  height: auto;
  width: 100%;
}  
 <meta charset="utf-8" http-equiv="content-type" content="text/html">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="css/style.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
  <header>
    <div id="header">
      <div id="tabs">

        <ul class="list-inline" id="nav">
          <li><a href="maps/map1.html">Area</a>
          </li>
          <li><a href="maps/map2.html">Facility</a>
          </li>
          <li class="dropdown"><a href="#">Matrix<span class="caret"></span></a>
            <div class="dropdown-content" id="myDropdown">
              <a href="table1.html">Table1</a>
              <a href="table2.html">Table2</a>

            </div>
          </li>
        </ul>
      </div>
    </div>
  </header>

Ответ №1:

Это может выглядеть примерно так:

 $(".dropdown-content a").click(function(e){
    /* stop the a tag from going to the page */
    e.preventDefault();
    var url = $(this).attr("href");
    $.ajax({
        url: url,
        type: "post",
        success: function(data) {
            /*selector will be the area you want to load the data*/
            $(selector).html(data);
        }
    });
});