如何更改PHP中的选项卡? [英] How to change in tab in PHP?

查看:66
本文介绍了如何更改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 your
  • items 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 &middot; 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屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆