收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1011|回复: 1

[jquery] 一个选项卡的问题

[复制链接]
发表于 2015-3-19 09:45:46 | 显示全部楼层 |阅读模式

 提示:您可以先修改部分代码再运行






假如说我很多页面都要用到这个选项卡,并且样式大小都不一样。
这样是不是要写一个对象?
如果用对象是如何写啊,我想在不同的页面调用这一个功能,但很多页面的样式和大小不一样,请教
发表于 2015-3-19 11:31:27 | 显示全部楼层
本帖最后由 jianwang19 于 2015-3-19 11:32 编辑

  1. <script type="text/javascript">
  2. jQuery.fn.myTabs = function(item,block,active){
  3.         var $this = jQuery(this);
  4.         var $item = $this.find(item), $block = $this.find(block), active = active || 'active';
  5.         $item.eq(0).add($block.eq(0)).addClass(active);
  6.         $item.click(function(){
  7.                 if(jQuery(this).hasClass(active)){
  8.                         return false;
  9.                 }
  10.                 var i = jQuery(this).index();
  11.                 jQuery(this).addClass(active).siblings('.' + active).removeClass(active);
  12.                 $block.eq(i).addClass(active).siblings('.' + active).removeClass(active);
  13.         });
  14. };
  15. </script>
  16. <div class="technology-hotspot news">
  17.                                         <div class="head">技术热点</div>
  18.                                         <div class="content">
  19.                                                 <div class="tabs">
  20.                                                         <div class="tabs-item">智能</div>
  21.                                                         <div class="tabs-item">程序</div>
  22.                                                         <div class="tabs-item">设计</div>
  23.                                                 </div>
  24.                                                 <div class="tabs-block">
  25.                                                         <div class="item">
  26.                                                                 <div class="marb10">
  27.                                                                         <img src="images/news/1.jpg" />
  28.                                                                 </div>
  29.                                                                 <div class="sub">
  30.                                                                         <a href="#" target="_blank">1.智能硬件领域成为最为火爆的创业方向之一,但与其在资本市场的火爆不符的是智能硬件电商化还未真正开始。不客气说,智能硬件的电商化远未正式开始,多数企业尚未真正完成电商化进程。主要有以下原因。<br />中国经济网北京3月13日讯 3月12日,国务院批复,同意设立中国(杭州)跨境电子商务综合试验区以下简称综合试验区。国务院要求,综合试验区应着力在跨境电子商务交易、支付、物流、通关、退税、结汇等环节的技术标准、业务流程、监管模式和信息化建设等方面先行先试,通过制度...</a>
  31.                                                                 </div>
  32.                                                         </div>
  33.                                                         <div class="item">
  34.                                                                 <div class="marb10">
  35.                                                                         <img src="images/news/2.jpg" />
  36.                                                                 </div>
  37.                                                                 <div class="sub">
  38.                                                                         <a href="#" target="_blank">2.智能硬件领域成为最为火爆的创业方向之一,但与其在资本市场的火爆不符的是智能硬件电商化还未真正开始。不客气说,智能硬件的电商化远未正式开始,多数企业尚未真正完成电商化进程。主要有以下原因。<br />中国经济网北京3月13日讯 3月12日,国务院批复,同意设立中国(杭州)跨境电子商务综合试验区以下简称综合试验区。国务院要求,综合试验区应着力在跨境电子商务交易、支付、物流、通关、退税、结汇等环节的技术标准、业务流程、监管模式和信息化建设等方面先行先试,通过制度...</a>
  39.                                                                 </div>
  40.                                                         </div>
  41.                                                         <div class="item">
  42.                                                                 <div class="marb10">
  43.                                                                         <img src="images/news/3.jpg" />
  44.                                                                 </div>
  45.                                                                 <div class="sub">
  46.                                                                         <a href="#" target="_blank">3.智能硬件领域成为最为火爆的创业方向之一,但与其在资本市场的火爆不符的是智能硬件电商化还未真正开始。不客气说,智能硬件的电商化远未正式开始,多数企业尚未真正完成电商化进程。主要有以下原因。<br />中国经济网北京3月13日讯 3月12日,国务院批复,同意设立中国(杭州)跨境电子商务综合试验区以下简称综合试验区。国务院要求,综合试验区应着力在跨境电子商务交易、支付、物流、通关、退税、结汇等环节的技术标准、业务流程、监管模式和信息化建设等方面先行先试,通过制度...</a>
  47.                                                                 </div>
  48.                                                         </div>
  49.                                                 </div>
  50.                                         </div>
  51.                                 </div>
  52. <script type="text/javascript">
  53. jQuery('.technology-hotspot').myTabs('.tabs .tabs-item','.tabs-block .item','active');
  54. </script>
复制代码

这是我一直用的一个选项卡,自己写的 截图如下
Snap.jpg
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-12-6 23:27 , Processed in 0.107150 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表