Я использую вкладки JQuery, и я хочу иметь возможность загружать каждую страницу по мере ее нажатия.
поэтому мой index.php имеет верхнюю часть для моих подключений к базе данных и т. д., тогда у меня есть эти вкладки:
<ul class="nav nav-tabs"> <li class="active"><a href="#tab_1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab_2" data-toggle="tab">Tab 2</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </li> <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li> </ul> и каждая вкладка имеет свой собственный div:
<div class="tab-content"> <div class="tab-pane active" id="tab_1"> </div><!-- /.tab-pane --> <div class="tab-pane" id="tab_2"> </div><!-- /.tab-pane --> </div><!-- /.tab-content -->
Затем у меня есть отдельные страницы, которые не включают соединение с базой данных, которое я хочу включить в div содержимого вкладки
но я не хочу, чтобы все они загружались при загрузке страницы index.php. как я могу установить каждый из них для загрузки при нажатии на вкладку?
вам нужно вызвать ajax change tab. Вы можете использовать следующий код. Этот пример приведен на сайте jQuery
<script> $(function() { $( "#tabs" ).tabs({ beforeLoad: function( event, ui ) { ui.jqXHR.fail(function() { ui.panel.html( "Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo." ); }); } }); }); </script>
HTML
<div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> <li><a href="ajax/content1.html">Tab 1</a></li> <li><a href="ajax/content2.html">Tab 2</a></li> <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> </div>
Вы можете найти более подробную информацию здесь https://jqueryui.com/tabs/#ajax
Вы можете использовать функцию загрузки jquery. И вы можете включить php-файл в onclick вашей вкладки. Используйте ниже код
<script> $(document).ready(function(){ $("#tabid").click(function() { $("#whereToPlace").load("http://path/to/file"); }); }); </script>
Не забудьте сначала включить библиотеку JQuery
когда вы нажимаете на вкладку, попробуйте этот код.
$(document).ready(function(){ $('#tab_1').click(function(){ //tab sub contents $('.sub_content1').load(/*url if div with id then #tab_1_content*/); }) $('#tab_2').click(function(){ //tab sub contents $('.sub_content2').load(/*url if div with id then #tab_2_content*/); }) }