MVC易用户界面三层新闻网站建立制表符标签制作方法（六)

手动音量调节新闻网站建立，完成制表符标签的制作。

首先对中心进行一个简单的布局

！-中间布局开始- div数据-选项='region:'center '，title : ' Center ' ' div class=' measuri-tab ' style=' width :700 px；'高度：250 px ' fit=' true ' id=' TT ' div title='欢迎使用h1 style=' font-size : 24px'欢迎！/h1 h1 style=' font-size : 24px；''颜色：红色'欢迎光临！/h1 /div /div /div！-中间布局结束-然后就是在射流研究…里面完成制表符的点击事件实现了

其实中心就是在差异里面嵌入了一个iframe，所以最后返回的就是一个内联框架

脚本类型=' text/JavaScript ' $(function(){//tab的点击事件bindtabasevent()；});函数bindtabasevent(){ $(').细节')。单击(函数(){ //拿到点击标题var title=$(this).text()；//拿到点击的url var url=$(this).attr(' URL ')；//判断标签是否存在var isExt=$('#tt ').制表符('存在，标题);//如果存在则选中if (isExt) { $('#tt ').制表符('选择，标题);//选中返回；} //不存在就添加标签$('#tt ').制表符(' add '，{ title: title，content : createTabContent(URL)，可关闭的： true })；});}函数createTabContent(URL){ return ' iframe src=' http : ' URL ' ' scrolling=' no '框架边框=' 0 '宽度=' 100% '高度=' 100% '/iframe '；}/脚本这里需要注意一点就是上面的详述是导航栏的类选择器的值（这里的班级一定要一样)

整个页面代码

@ { Layout=null}！DOCTYPE htmlhtmlhead元名称=' viewport ' Content=' width=device-width '/title index/title script src=' http : ~/Scripts/jquery-1。8 .2 .js '/script script src=' http : ~/Content/measuri/jquery。苏西。量滴js '/script script src=' http : ~/Content/measuri/measuri-lang-zh _ cn。js '/脚本链接href='的点击事件bindtabasevent()；});函数bindtabasevent(){ $(').细节')。单击(函数(){ //拿到点击标题var title=$(this).text()；//拿到点击的url var url=$(this).attr(' URL ')；//判断标签是否存在var isExt=$('#tt ').制表符('存在，标题);//如果存在则选中if (isExt) { $('#tt ').制表符('选择，标题);//选中返回；} //不存在就添加标签$('#tt ').制表符(' add '，{ title: title，content : createTabContent(URL)，可关闭的： true })；});}函数createTabContent(URL){ return ' iframe src=' http : ' URL ' ' scrolling=' no '框架边框=' 0 '宽度=' 100% '高度=' 100% '/iframe '；}/script/head body class=' measuri-layout ' div data-options=' region : ' north '，border : false ' style=' height :60 px；背景# B3DFDApadding:10px '北区/分区！-左侧布局- div数据-选项='region:'west '，split:true，title : ' West ' ' style=' width :150 px；padd :0 pxdiv class=' measuri-accordion ' style=' width : auto；height:auto' div title='新闻管理data-options=' icon cl s 3360 ' icon-ok ' ' style=' overflow : auto；padd :10 pxa href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' class=' detail ' URL='/AdminNewInfo/Index '新闻管理/a /div div title='评论管理data-options=' icon cl s 3360 ' icon-ok ' ' style=' overflow : auto；padd :10 pxa href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' class=' detail ' URL='/comment info/Index '评论管理/a/div/div/-左侧布局结束- div数据-选项='region:'south '，border : false ' style=' height :30 px；背景： # A9FACDpadding:10px南部地区/分区！-中间布局开始- div数据-选项='region:'center '，title : ' Center ' ' div class=' measuri-tab ' style=' width :700 px；高度：250 px ' fit=' true ' id=' TT ' div title='欢迎使用h1 style=' font-size : 24px'欢迎！/h1 h1 style=' font-size : 24px；颜色：红色欢迎光临！/h1 /div /div /div！-中间布局结束- /body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。