如何更改PHP中的选项卡? [英] How to change in tab in PHP?
本文介绍了如何更改PHP中的选项卡?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已在html中创建了作为管理面板的页面。我想更改页面,就像用户点击给出的不同选项卡一样,如图所示。仪表板,菜单,滑块。
我只想在用户点击它时,右下方窗口自动更改,我认为它将在jquery中完成,但不知道如何。请帮助我..
I have created the page in html as the admin panel. I want to change the page as when the user click on the different tabs given like as in fig. Dashboard, menue, slider.
i just want when the user click on it, the right lower window change automatically, i think it will done in the jquery, but have no idea how. please help me..
<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>
我尝试了什么:
i想要尝试使用javascript或jquery来处理项目。
What I have tried:
i want to try the javascript or the jquery inorder to work with the project.
推荐答案
有很多不同的方法可以解决这个问题,但本着保持HTML的精神......我将创建一个非常轻量级的解决方案。
关键项是项目有一类tab-lbl和data-tab的数据属性。 data-tab包含 标记所针对的div的ID。
标签本身放在包含ID的包装元素中来自数据选项卡中的相应选项卡标签。
您可以根据标签标签上的类名设置哪个标签处于活动状态来扩展。
简单搜索jQuery选项卡将为您提供数千个结果,这里是一个小样本
JavaScript& middot; Bootstrap [ ^ ]
标签| jQuery UI [ ^ ]
10个最有利的jQuery选项卡插件 [
There a plenty of different ways to solve this problem but in the spirit of keeping your HTML...im going to create an extremely lightweight solution.
The key items is that youritems have a class of tab-lbl and a data attribute of data-tab. data-tab contains the ID of the div that the tag is targeting.
The tabs themselves get put inside a wrapper elements containing the ID from the respective tab label located in data-tab.
You can expand upon this by setting which tab is active based on a class name on the tab label.
A simple search of jQuery tabs will give you thousands of results, here is a small sample
JavaScript · Bootstrap[^]
Tabs | jQuery UI[^]
10 Most Beneficial jQuery Tab Plugins[^]
<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 =
("#tab-container").on("click", ".tab-lbl", function(){ var that =
这篇关于如何更改PHP中的选项卡?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文