十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
用框架来实现,具体实现方法我就不贴了,给你个我的思路好了。
我们提供的服务有:成都网站设计、成都做网站、微信公众号开发、网站优化、网站认证、芮城ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的芮城网站制作公司
div class="menu"
div id="menu_1"/div
/div
div class="content"
div id="1"iframe/iframe/div
/div
每点击按钮一次:1.把menu和content里的子元素全部隐藏;2.给menu添加一个子元素div像menu_1一样,同样给content添加一个像id=1的div一样的div;
大体就这样,然后点击,关闭之类的就很好写了。因为menu中的元素与content中的元素师一一对应的,点击上面的,下面对应的就隐藏,然后把上一个显示出来。关闭也一样。至于其他的js效果,你自己想办法吧。动动手对写js的水平提高很有好处的。
可以给div前面留一个padding;
然后选中的tab加特定class,这里用selected举例;
进页面的时候,默认第一个tab的class是selected.
然后设置selected的样式为:position:absolute;left:0; 定位到最左边留出来的padding上
然后给所有tab绑定事件, 点击的话,其他tab就移出selected类, 当前tab加上selected类.
这样就点哪个,哪个就有绝对定位属性,就到第一个去了
!doctype html
html
head
meta charset="utf-8"
title无标题文档/title
/head
script src="../java_bag_inc/jquery-1.9.1.min.js"/script
script src="../jquery-easyui-1.3.5/jquery.easyui.min.js"/script
link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.5/themes/metro/easyui.css"
body
div class="easyui-window" title="Layout Window" icon="icon-help" style="width:500px;height:250px;padding:5px;background: #fafafa;"
div class="easyui-layout" fit="true"
div region="center" border="false" border="false"
div class="easyui-tabs" fit="true"
div title="Home" style="padding:10px;"
jQuery easyui framework help you build your web page easily.
/div
div title="Contacts"
No contact data.
/div
/div
/div
div region="south" border="false" style="text-align:right;height:30px;line-height:30px;"
a class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"Ok/a
a class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)"Cancel/a
/div
/div
/div
/body
/html
需要包含文件,EasyUI的标准CSS文件。1.8以上的JQuery,mini版就行。以及一个标准的EasyUI的js文件,同样mini版就可以
另附上一个完整的EasyUI包
你的name和ID不能相同 想同就会导致校验不起作用 希望可以帮到你