jquery实现多标签折页

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量4.5k 收藏 1
点赞数
文章标签： jquery function class stylesheet javascript div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ilovewebservice/article/details/6286565
版权

页面文件如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多标签折页</title>
<link href="css/style.css" type=text/css rel=stylesheet / >
<link href="css/foot.css" type=text/css rel=stylesheet / >
<link href="css/top.css" type=text/css rel=stylesheet / >
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jQuery.moretagPack.js"></script>
</head>
<body>

             <DIV id="divContainer" align="center" style="margin:20px;">
       <!-- 折页标签 -->
    <DIV class=C26>
       <A title="PLM" class="a_C01" href="javascript:;">PLM</A>
       <A title="ERP" class="a_C2" href="javascript:;">ERP</A>
       <A title="IT" class="a_C2" href="javascript:;">IT</A>
       <A title="工控" class="a_C2" href="javascript:;">工控</A>
     </DIV> 
     <!-- 上部内容1 -->  
    <div class="Ctop" title="PLM">
     <h2><a hred="#">渠道共赢——ERP市场的成功之路</a></h2>
       <ul>
       <li><a href="#" rel="external">[高新信息]</a></li>
       <li><a href="#" rel="external">[产业信息]</a></li>
       <li><a href="#" rel="external">[发展信息]</a></li>
       <li><a href="#" rel="external">[信息计划]</a></li>
      </ul>
     </div>
     <!-- 文字列表1 -->
           <div class="pC" title="PLM">
      <dl>
       <dt><span><a href="#" rel="external">浙江年画生产商称华南虎照片源自其产品(图)</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">三地发现年画"周老虎" 挺虎派官员暗示照片有假</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">百余记者争扑老虎新闻　当地披露一串虎消息(图)</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">周正龙回应华南虎年画：年画是照着照片画的(图)</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">在东莞找到第三幅与陕西“华南虎”相似的年画</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">二维CAD复后的思考后的思考..</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">郝劲松将作客网易聊天室，回答我们和您.</a></span>10-25</dt>
      </dl>
     </div>
     <!-- 上部内容2 -->  
         <div class="Ctop" style="display:none;" title="ERP">
      <h2><a hred="#">ERP市场—渠道共赢—的成功之路</a></h2>
       <ul>
        <li><a href="#" rel="external">[安全信息]</a></li>
        <li><a href="#" rel="external">[信息产业]</a></li>
        <li><a href="#" rel="external">[信息发展]</a></li>
        <li><a href="#" rel="external">[信息]</a></li>
       </ul>
      </div>
      <!-- 文字列表2 -->
           <div class="pC" style="display:none;" title="ERP">
      <dl>
        <dt><span><a href="#" rel="external">维CAD复兴D复兴D二维CAD复兴</a></span>10-25</dt>
        <dt><span><a href="#" rel="external">二维CAD复兴背后的思考后的思考...</a></span>10-25</dt>
        <dt><span><a href="#" rel="external">二维CAD复背后的思考后的思考</a></span>10-25</dt>
        <dt><span><a href="#" rel="external">二维CAD复兴后的思考...</a></span>10-25</dt>
        <dt><span><a href="#" rel="external">二维CA复兴背后的思考后的思考</a></span>10-25</dt>
        <dt><span><a href="#" rel="external">二维CAD复后的思考后的思考..</a></span>10-25</dt>
        <dt><span><a href="#" rel="external">二维CD复兴背后后的思考...</a></span>10-25</dt></dl>
     </div>
           <!-- 上部内容3 -->
           <div class="Ctop" style="display:none;" title="IT">
     <h2><a hred="#">成功之路—渠道共赢—ERP市场的</a></h2>
      <ul>
       <li><a href="#" rel="external">[信息]</a></li>
       <li><a href="#" rel="external">[信息产业]</a></li>
       <li><a href="#" rel="external">[信息发展]</a></li>
       <li><a href="#" rel="external">[信息]</a></li>
      </ul>
     </div>
     <!-- 文字列表3 -->
           <div class="pC" style="display:none;" title="IT">
      <dl>
       <dt><span><a href="#" rel="external">河南郏县违规征地 村民实名举报信被公开</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">二维CAD复兴背后的思考后的思考...</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">鑫诺二号因故障无法工作 年底前最后抢救 </a></span>10-25</dt>
       <dt><span><a href="#" rel="external">二维CAD复兴后的思考...</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">孟加拉国强风暴导致过万人丧生(</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">开创基层党的建设新局面</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">二维CD复兴背后后的思考...</a></span>10-25</dt>
      </dl>
     </div>
           <!-- 上部内容4 -->
     <div class="Ctop" style="display:none;" title="工控">
      <h2><a hred="#">渠道共赢—ERP市场—的成功之路</a></h2>
      <ul>
       <li><a href="#" rel="external">[观点信息]</a></li>
       <li><a href="#" rel="external">[信息产业]</a></li>
       <li><a href="#" rel="external">[信息发展]</a></li>
       <li><a href="#" rel="external">[信息]</a></li>
      </ul>
     </div>
     <!-- 文字列表4 -->
     <div class="pC" style="display:none;" title="工控">
      <dl>
       <dt><span><a href="#" rel="external">三部委酝酿征收排放税 有车族为尾气买单</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">李光耀:北京不会因奥运而对"台独"手软(图)</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">二维CAD复背后的思考后的思考</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">12岁女孩替母扫街被誉为成都最美环卫工(</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">二维CA复兴背后的思考后的思考</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">杭州男子设计出大型"无性别公厕</a></span>10-25</dt>
       <dt><span><a href="#" rel="external">二维CD复兴背后后的思考...</a></span>10-25</dt>
      </dl>
     </div>
     </div>
<div align="center" style="text-align:left;padding:10px 0px 0px 4px;margin-top:20px;margin-left:auto;margin-right:auto;border:1px dashed #cccccc;width:450px; height:215px;">
<b>目标</b> --
多个标签页的折叠显示 ( 用jquery框架实现这一目标 )
<br/><br/>

<b>方案</b> --
点击某个标签页后，样式为选择状态，其他的非选择状态，下方的内容根据选择的标签页不同，变幻出只属于某个标签页下的内容。 <br/> <br/>

<b>实施</b> --
为了符合web2.0的标准，将表现层，代码层，和显示层彻底分离开来。有关实现"多个标签页的折叠显示"的代码位于 js文件夹下的jQueryManipulate.js文件中。
主要用到了<span style="color:red;">attr(),each(fn) ,css() ,show() ,hide()</span>这几个主要的函数。有关这几个函数的定义，和使用方法，大家可以看看它的API。
我们先来看看这个DOM树的构造图。

<br/>
<img src="images/dom.jpg" alt="图片无法显示"/>
</div>
</body>
</html>

js文件：


// 控制前台页面中标签为input类别为text和password以及标签为textarea的页面显示
$(document).ready(function(){   
     if ($.browser.msie)
  {
     $("input[@type='text'],input[@type='password'],textarea").focus(function(){
     $(this).addClass("ie_focus");
   }
   )
   .blur(function(){
     $(this).removeClass("ie_focus");
   }
   )
  }    
  }
  )

// 控制页面中区块的隐藏 | 显示
$(function(){     
     $("div #rollA").click(function(){ 
   var displayVal = $("#whitepaperDiv").css("display") ;    
   if (displayVal == 'none')  // 显示
   { 
   
       $('div #whitePaperImg').attr({src: "images/icon_portlet_minimize.gif", title: "Minimize"});    
       $('#whitepaperDiv').show("slow") ;
   }
   else                    // 隐藏
   {
       $('div #whitePaperImg').attr({ src: "images/icon_portlet_maximize.gif", title: "Maximize" }); 
       $('#whitepaperDiv').hide("slow") ;
   }
   }
   )
  }
  )
// edit in place and now show
$(function(){
setClickable();
});

function setClickable() {
$('#editInPlace').click(function() {
var textarea = '<div><textarea rows="10" cols="60" style="width:750px;">'+$(this).html()+'</textarea>';
var button  = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>';
var revert = $(this).html();
$(this).after(textarea+button).remove();
$('.saveButton').click(function(){saveChanges(this, false);});
$('.cancelButton').click(function(){saveChanges(this, revert);});
})
.mouseover(function() {
$(this).addClass("editable");
})
.mouseout(function() {
$(this).removeClass("editable");
});
};

function saveChanges(obj, cancel) {
if(!cancel) {
var t = $(obj).parent().siblings(0).val();
}
else {
var t = cancel;
}
if(t=='') t='(click to add text)';
$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove();
setClickable();
} 

// 控制页面中"新闻速递","厂商动态"的隐藏 | 显示
$(document).ready(function(){     
     $("#divnews .h26 A").click(function(){         
   // 确保点击的为指定样式
   if ($(this).attr('class') != 'a_01')
   {
    // 确保点击的为指定样式
    $('#divnews .h26 A').each(function(i){
     if ($(this).attr("class") != 'a_01')
     {
       $(this).attr("class","a_01");
     }
     else
     {
      $(this).attr("class","a_2");
     }      
    });
    // switchShowHide();
    $('#divnews .pL').each(function(i){
       var displayVal = $(this).css("display") ; 
       if (displayVal == 'none')  // 显示
     {        
      $(this).show() ;
     }
     else                    // 隐藏
     {  
      $(this).hide() ;
     }
    });
   }
   
   })  
  })

// 多页折叠的隐藏 | 显示
$(document).ready(function(){   
  
     $("#divContainer .C26 a").click(function(){      
   // 确保点击的为指定样式
   if ($(this).attr('class') != 'a_C01')
   {   
    // 折叠标签页的样式指定
    $('#divContainer .C26 A').each(function(i){
        $(this).attr("class","a_C2");
    });
    $(this).attr("class","a_C01");
    // 获取选择的标签
    var selectTitle = $(this).attr("title");    
    // 对应标签下上部内容区块的显示 | 隐藏
    $('#divContainer .Ctop').each(function(i){
       var displayVal = $(this).css("display") ; 
       var title = $(this).attr("title");
       if (displayVal == 'none' && title == selectTitle)  // 显示
     {        
      $(this).show() ;
     }
     else                    // 隐藏
     {  
      $(this).hide() ;
     }
    });
    // 文字列表区块的显示 | 隐藏
    $('#divContainer .pC').each(function(i){
       var displayVal = $(this).css("display") ; 
       var title = $(this).attr("title");
       if (displayVal == 'none'  && title == selectTitle)  // 显示
     {        
      $(this).show() ;
     }
     else                    // 隐藏
     {  
      $(this).hide() ;
     }
    });
   }
   
   })  
  })

// 全选|取消全选功能
$(function() {
    $("#selectall").click(function() {
        $("input[@name='shareuser[]']").each(function() {
            $(this).attr("checked", true);
        });
    });
    $("#deselectall").click(function() {
        $("input[@name='shareuser[]']").each(function() {
            $(this).attr("checked", false);
        });
    });
});

// 图片文字的无缝循环滚动功能
$(function() {
    var speed = 60 ; 
 $('#demo2').html($('#demo1').html());
 
 var MyMar2=window.setInterval(Marquee2,speed);
    $('#demo').mouseover(function(){      
  window.clearInterval(MyMar2);
 });
 $('#demo').mouseout(function(){  
  MyMar2=window.setInterval(Marquee2,speed);
 }); 
});

 
function Marquee2()
{ 
 var demoscrolltop = $('#demo')[0].scrollTop ;
 var demo1offsetheight = $('#demo1')[0].offsetHeight ;
 var demo2offsettop = $('#demo2').get(0).offsetTop ;
 //alert('demoscrolltop:'+demoscrolltop+',demo1offsetheight:'+demo1offsetheight+',demo2offsettop:'+demo2offsettop);
 if (demo2offsettop - demoscrolltop <= 0)
 {
  demoscrolltop = demoscrolltop - demo1offsetheight;
 }
 else
 {
  $('#demo')[0].scrollTop++;
 }
}

 

ilovewebservice
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于JQuery的多标签实现代码
12-09
今天要分享的是基于JQuery实现的多标签的切换，JQuery就不用过多介绍了，网上一搜一大堆资料，当然这样的小示例也有很多，这里只是发表一些自己的想法。 下面是本次示例所使用的HTML页面： 代码如下: <!DOCTYPE ...
jQuery & CSS制作折页效果
跳蚤的专栏
06-09 434
不多说先看效果图 demo地址：http://www.sohtanaka.com/web-design/examples/peeling-effect/   1. HTML - 折页框      &lt;div id="pageflip"&gt; &lt;a href="#"&gt; &lt;img src="page_flip.png" alt="" /&amp
用jQuery实现网页的标签页效果
weixin_47982238的博客
08-14 307
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> *{ font-family: 微软雅黑; margin:0px; padding:0px; } .
jQuery打开多个标签页
zhousheng193的专栏
08-24 880
 
基于JQuery的多标签的实现
dljw41363的博客
09-18 154
最近在学习JQuery，其实也不叫学习，很久以前就学过，只是有一段时间没用，有些生疏了，于是就做几个小例子来练习练习，为了方便以后查找就将这些小示例记录下来。 今天要分享的是基于JQuery实现的多标签的切换，JQuery就不用过多介绍了，网上一搜一大堆资料，当然这样的小示例也有很多，这里只是发表一些自己的想法。 下面是本次示例所使用的HTML页面： View Code ...
jquery实现点击<ul>，相应的<li>折叠
wangyan_z的博客
08-09 3539
{% extends "./report.html"%} {%load staticfiles%} {%block jstable%} &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javasc...
通过jquery实现tab标签浏览效果
10-31
通过jquery实现tab标签浏览效果
Jquery实现关键字标签生成插件特效代码
03-20
Jquery实现关键字标签生成插件功能Enter或Tab或失去焦点确定标签输入完毕，双击文字可以编辑该标签，单击叉叉（）表示删除该标签 1、一开始初始化标签输入框的数量 2、容器可接受最大的标签数量 3、每个标签允许接受...
jQuery实现tab标签自动切换的方法
10-24
主要介绍了jQuery实现tab标签自动切换的方法,实例分析了jQuery操作tab标签的技巧,涉及addClass、siblings及removeClass链式操作的技巧,需要的朋友可以参考下
CSS3无图片实现华丽折页菜单效果（多浏览器兼容）
旋转木马的IT小窝
05-29 1964
http://lanfei.sinaapp.com/2012/05/1255.html Finally 最后当然是给出代码和Demo了： CSS部分： body{ margin:0; background:#ddd; } .wrapper{ width:960px; height:800px; margin:0 auto; p
html折叠标记,如何使用Vim折叠/展开HTML标签
weixin_39701288的博客
05-30 1404
如何使用Vim折叠/展开HTML标签是否有一些插件可以在Vim中折叠HTML标签？还是有另一种方法来设置折叠或展开html标签的快捷方式？我想像缩进折叠一样折叠/展开html标签。nsbm asked 2019-11-10T07:53:22Z6个解决方案76 votes我发现.vimrc.(或相等地zfit)可以很好地折叠HTML文档。 za将切换(打开或关闭)现有折页。 zR打开当前文档中的所有...
html折叠div,页面多个DIV折叠成效的实现(通用性高)
weixin_27244795的博客
05-30 1119
页面多个DIV折叠效果的实现(通用性高)#foldbar {margin-left:1000px;cursor:pointer;display:inline}var foldimg = "\+"var puckimg = "-"function fold(o) {var show = o.innerHTML == foldimg ? true : false;o.innerHTML = show ...
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 446
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 806
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
element-ui的bug记录
nick_zhang的博客
04-29 377
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 123
注释很详细，直接上代码……
bpmn-js推荐几款常用的插件
飞云先生
04-30 76
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 806
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
基于React实现B站评论区
stu_kk的博客
05-02 609
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
jQuery实现tab标签滑动切换效果
05-25
以下是一个简单的jQuery实现tab标签滑动切换效果的示例代码： HTML结构： ```html <li class="active">Tab1 <li>Tab2 <li>Tab3 <li>Tab4 <div class="tab-pane active">Tab1 Content ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值