Member 11063279 Ответов: 1

Как изменить вкладку в PHP?

Я создал страницу в html в качестве админ-панели. Я хочу изменить страницу, как когда пользователь нажимает на различные вкладки, приведенные как на рис. Приборная панель, меню, слайдер.
я просто хочу, когда пользователь нажимает на него, правое нижнее окно меняется автоматически, я думаю, что это будет сделано в jquery, но понятия не имею, как. пожалуйста, помогите мне.. 
<body>

<div id="header">
	<div class="logo"><a href="#"><span>TAJWEED</span></a></div>
</div>

<div id="container">
   <div class="sidebar">
       <div id="nav">
       <ul>
       	<li><a href="#" class="selected">Dashboard</a></li>
       	<li><a href="#">Menue</a></li>
       	<li><a href="#">Slider</a></li>
       	<li><a href="#">Gallery</a></li>
       	<li><a href="#">Pictures</a></li>

       </ul>
   	
       </div>
	
   </div>
   <div class="content">
   <h1>Dashboard</h1>
   <p>Here you can do the stuff</p>
   	
   </div>
	
</div>


Что я уже пробовал:

я хочу попробовать javascript или jquery для работы с проектом.

1 Ответов

Рейтинг:
9

David_Wimbley

Существует множество различных способов решения этой проблемы, но в духе сохранения вашего HTML...im мы собираемся создать чрезвычайно легкое решение.

Ключевые пункты заключаются в том, что ваш

  • элементы имеют класс вкладка-ЛБЛ и атрибутивные данные данные-вкладка. данные-вкладка содержит идентификатор элемента div, что
  • тег-это таргетинг.

    Сами вкладки помещаются внутрь обертки элементов, содержащих идентификатор из соответствующей метки вкладки, расположенной в data-tab.

    Вы можете расширить эту информацию, установив, какая вкладка активна, на основе имени класса на метке вкладки.

    Простой поиск вкладок jQuery даст вам тысячи результатов, вот небольшой пример

    JavaScript · Bootstrap[^]

    Вкладки / пользовательский интерфейс jQuery[^]

    10 самых полезных плагинов jQuery Tab[^]


    <html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#tab-container").on("click", ".tab-lbl", function(){
				var that = $(this);
				var tabid = that.data("tab");
				
				$(".tab").each(function(k, v){
					$(this).hide();
				});
				
				$(tabid).show();
			});
		});
	</script>
</head>

<body>
 
<div id="header">
	<div class="logo"><a href="#"><span>TAJWEED</span></a></div>
</div>
 
<div id="container">
   <div class="sidebar">
       <div id="nav">
       <ul id="tab-container">
       	<li><a href="#" class="selected tab-lbl" data-tab="#tab-dashboard">Dashboard</a></li>
       	<li><a href="#" class="tab-lbl" data-tab="#tab-menu">Menue</a></li>
       	<li><a href="#" class="tab-lbl" data-tab="#tab-slider">Slider</a></li>
       	<li><a href="#" class="tab-lbl" data-tab="#tab-gallery">Gallery</a></li>
       	<li><a href="#" class="tab-lbl" data-tab="#tab-pictures">Pictures</a></li>
 
       </ul>
   	
       </div>
	
   </div>
   <div class="content">
		<div id="tab-dashboard" class="tab"><h1>Dashboard</h1></div>
		<div id="tab-menu" class="tab" style="display: none;"><h1>Menu</h1></div>
		<div id="tab-slider" class="tab" style="display: none;"><h1>Slider</h1></div>
		<div id="tab-gallery" class="tab" style="display: none;"><h1>Gallery</h1></div>
		<div id="tab-pictures" class="tab" style="display: none;"><h1>Pictures</h1></div>
</div>

</body>
</html>
</div>