jQuery营销网络地图tab标签选项卡切换代码



123 489 164



特效描述:jQuery 营销网络地图 tab标签 选项卡切换,jQuery营销网络地图切换代码,鼠标悬停地图上面的锚点,内容响应的切换显示代码。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/public.css"/>
<link rel="stylesheet" href="css/animate.min.css"/>

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/others.js"></script>

3. HTML代码

<div id="inmain">
    <div class="incontent">
        <div class="w1230 clearfix">
            <div class="layoutintro clearfix">
                <div class="chinamap animated fadeIn">
                    <a href="javascript:void(0);" class="point point-henan hovers" data-id="henan"><span>河南省</span></a>
                    <a href="javascript:void(0);" class="point point-anhui "  data-id="anhui"><span>安徽省</span></a>
                    <a href="javascript:void(0);" class="point point-shandong " data-id="shandong"><span>山东省</span></a>
                    <a href="javascript:void(0);" class="point point-guangdong " data-id="guangdong"><span>广东省</span></a>
                    <a href="javascript:void(0);" class="point point-guizhou " data-id="guizhou"><span>贵州省</span></a>
                    <a href="javascript:void(0);" class="point point-liaoning " data-id="liaoning"><span>辽宁省</span></a>
                    <a href="javascript:void(0);" class="point point-xinjiang " data-id="xinjiang"><span>新疆</span></a>
                    <a href="javascript:void(0);" class="point point-yunnan " data-id="yunnan"><span>云南省</span></a>
                </div>
                <div class="worldmap animated fadeIn dn">
                    <a href="javascript:void(0);" class="point point-Espana hovers" data-id="Espana"><span>西班牙</span></a>
                    <a href="javascript:void(0);" class="point point-vietnam "  data-id="vietnam"><span>越南</span></a>
                    <a href="javascript:void(0);" class="point point-germany " data-id="germany"><span>德国</span></a>
                    <a href="javascript:void(0);" class="point point-norway " data-id="norway"><span>挪威</span></a>
                    <a href="javascript:void(0);" class="point point-Netherlands " data-id="Netherlands"><span>荷兰</span></a>
                    <a href="javascript:void(0);" class="point point-singapore "  data-id="singapore"><span>新加坡</span></a>
                    <a href="javascript:void(0);" class="point point-israel " data-id="israel"><span>以色列</span></a>
                    <a href="javascript:void(0);" class="point point-usa " data-id="usa"><span>美国</span></a>
                </div>
                <div class="layoutbox animated fadeInRight">
                    <ul class="layout-title clearfix">
                        <li class="icon-map-china current"><a href="javascript:void(0);">生产布局</a></li>
                        <li class="icon-map-world"><a href="javascript:void(0);">海外机构</a></li>
                    </ul>
                    <div class="layout-intro">
                        <h4>覆盖全国的产业布局</h4>
                        <p>
                            金正大通过新设、收购或合作租赁等方式,在山东临沭、山东菏泽、安徽长丰、河南郸城、河南驻马店、辽宁铁岭、贵州瓮安、云南晋宁、山东德州、广东英德、新疆阿克苏、湖北潜江等地进行基地建设,形成了覆盖全国主要产粮区的产业布局,更加贴近原料产地和销售场,大大缩短了运输距离与服务半径,进一步提高了企业的竞争力。
                        </p>
                    </div>
                    <div class="layout-intro dn">
                        <h4>由“中国领先”向“世界领先”迈进</h4>
                        <p>
                            金正大坚持国际化战略,在美国、挪威、以色列、德国、荷兰、越南、香港等地设有分支机构,全面推进人才、资本、技术和产品的国际化,实现由“中国领先”向“世界领先”的迈进,将金正大打造成具有世界影响力的控股企业集团。
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layout-desc-box">
            <i class="icon-dir"></i>
            <div class="layout-desc clearfix " data-content="henan">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img src="img/1.jpg"/>
                    </a>
                    <a href="javascript:void(0);">
                        <img src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">河南金正大生态工程有限公司</a></li>
                        <li><a href="javascript:void(0);">河南豫邮金大地科技服务有限公司</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">河南金正大生态工程有限公司成立于2011年4月,是由金正大集团出资6000
                        万元设立的全资子公司,公司位于河南省周口市郸城县城建设街389号,注册资金6000万元,员工600余人。年产能为30万吨复合肥、10万吨缓控释肥。公司的建立有利于扩大河南市场份额,更好的贴近客户,降低公司产品生产及运输成本,从而进一步提升综合竞争力。
                        </p>
                        <p>
                            河南豫邮金大地科技服务有限公司由金正大集团与河南省邮政公司合资建立,主要从事复合肥、缓控释肥等新型肥料生产和销售。公司位于河南省驻马店市练江路东段,注册资本1亿元,占地面积124亩,年生产能力40万吨,现有员工近500人。公司自2012年2月18号开工建设到8月18号建成投产,仅用了短短六个月的时间,开创了驻马店招商引资建厂的新速度。公司先后取得驻马店市级科技型企业、驻马店市级企业技术中心、驻马店市级工程技术研究中心及驻马店市十大高新技术企业等荣誉称号。驻马店公司的建立可以充分发挥金正大集团与中国邮政双方各自在资源、市场、技术、资金、服务等方面的优势,有利于双方企业做大做强及可持续发展。
                        </p>
                    </div>
                </div>
            </div>
            <div class="layout-desc clearfix dn" data-content="anhui">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">安徽金正大生态工程有限公司</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">
                        安徽金正大成立于2011年1月,是由金正大集团出资设立的全资子公司,也是金正大集团首个省外基地。公司位于安徽省长丰县新兴工业园内,注册资本1亿元,总投资2.18亿元。安徽公司总占地面积62000平方米,目前拥有员工500人,采用国内先进生产工艺和技术,设备自动化程度高,是复合肥生产的样板化工厂,主要从事复混肥料(复合肥)、缓控释肥料、有机肥料、微生物肥料的生产销售,年产能为20万吨复合肥、10万吨缓控释肥。安徽金公司的成立,有利于完善金正大的生产力布局,将缩短生产基地与安徽、河南南部、江苏南部市场距离,进一步降低运输成本,提升公司产品市场竞争力与农化服务能力。
                        </p>
                    </div>
                </div>
            </div>
            <div class="layout-desc clearfix dn" data-content="shandong">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img src="img/1.jpg"/>
                    </a>
                    <a href="javascript:void(0);">
                        <img src="img/1.jpg"/>
                    </a>
                    <a href="javascript:void(0);">
                        <img src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">临沭基地</a></li>
                        <li><a href="javascript:void(0);">菏泽金正大生态工程有限公司</a></li>
                        <li><a href="javascript:void(0);">德州金正大生态工程有限公司</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">
                        金正大临沭基地,位于山东省临沭县兴大西街19号,主要从事复合肥、缓控释肥、硝基肥、水溶肥的生产销售,年产能为110万吨复合肥、120万吨缓控释肥,10万吨水溶肥。临沭生产基地是金正大集团最早的生产基地。
                        </p>
                        <p>
                            菏泽金正大成立于2007年5月,位于菏泽经济开发区,占地2000余亩,拥有员工2300多人,主要从事复混肥、复合肥、缓控释肥的生产销售,年产能为60万吨复合肥、30万吨缓控释肥、90万吨硝基复合肥。作为公司异地扩张的第一个生产基地,菏泽公司的建成和运行,为金正大异地扩张、公司管控积累了宝贵经验。
                        </p>
                        <p>
                            德州金正大生态工程有限公司成立于2012年12月6日,由金正大集团出资成立,注册资本6000万元。公司位于德州市武城县北方街南运河路东,总占地200亩,主要从事复合肥、缓控释肥、水溶性肥料及其它新型肥料产品的研发、生产和销售,年生产能力30万吨,现有员工500余人。德州是山东的北大门,向北靠近北京、天津,向南邻河北,都是主要的粮食作物与经济作物生产区,公司在此设立生产基地,将有效降低运输与生产成本,优化布局,提升盈利能力,进一步增强公司竞争力。
                        </p>
                    </div>
                </div>
            </div>
            <div class="layout-desc clearfix dn" data-content="guangdong">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">广东金正大生态工程有限公司</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">
                        广东金正大生态工程有限公司成立于2013年,位于广东省英德市英红工业园,是金正大集团的全资子公司。公司注册资本1亿元,总投资3.3亿元,主要从事新型作物专用复合肥、控释肥、液体肥、水溶性肥料、生物菌肥和黄腐酸钾的生产与销售,目前拥有员工400余人。广东公司的所在地及周边市场—广西、湖南、福建、海南是我国南方主要的农作物、经济作物产区,区内作物播种面积1313
                        万公顷,市场潜力巨大。公司在此设立是集团有针对性的一次产业布局与优化,将进一步提高集团在南方市场的知名度、市场占有率与服务能力,降低运输、生产成本,增强集团竞争力。
                        </p>
                    </div>
                </div>
            </div>
            <div class="layout-desc clearfix dn" data-content="guizhou">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">金正大诺泰尔化学有限公司</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">
                            金正大诺泰尔化学有限公司是金正大集团投资成立的子公司,成立于2011年8月26日,注册资金22.3亿元,位于贵州省瓮安县经济开发区。项目总投资59.6亿元,一期占地面积2200亩,是全国最大的硝基肥和水溶肥单体生产基地,年主产品、副产品、及中间品合计425万吨。项目规划分两期进行建设,其中一期工程投资33.6亿元,建成后年产值60亿元,利税8.6亿元,可解决1800人就业。自2014年4月陆续建成投产,截至目前已完成投资30多亿元。二期工程计划投资26亿元,全部建成后可实现年产值104亿元,利税14亿元,可安排3000人就业。
                        公司项目按照循环经济的理念进行规划和设计,致力于环境友好,资源的综合利用和高效利用,实现企业的可持续发展。同时,公司打造全产业链项目,从最初的矿石选取、原料深加工、中间品、主产品到三废的处理,形成一个全国领先的完善产业链条和磷化工循环经济的综合利用示范园区。
                        </p>
                    </div>
                </div>
            </div>
            <div class="layout-desc clearfix dn" data-content="liaoning">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">辽宁金正大生态工程有限公司</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">
                        辽宁金正大成立于2011年10月,位于辽宁省铁岭市清河工业园,主要从事复混肥、复合肥、缓控释肥的生产销售,年产能为30万吨复合肥、10万吨缓控释肥。设立辽宁金正大是金正大根据东北地区市场现状,通过合资、合作方式建厂,并通过区域农化服务中心建设,加快实施驻点服务、密集开发,掌控优质渠道资源,提高公司产品在东北地区的市场占有率。辽宁金正大项目建成投产后将改善东北部地区销售旺季供货不足的局面,减少流通环节,降低运输成本,提高公司在东北市场的农化服务能力与市场竞争力。
                        </p>
                    </div>
                </div>
            </div>
            <div class="layout-desc clearfix dn" data-content="xinjiang">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img  src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">新疆金正大农佳乐生态工程有限公司</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">
                        金正大集团与新疆农资集团在2015年3月2日签署战略合作协议,控股组建了新疆金正大农佳乐生态工程有限公司,项目地址在阿克苏西工业园区西湖路东侧,规划占地面积200余亩;项目分期实施,规划建设20万吨/年新型作物专用肥、10万吨/年水溶肥、10万吨/年功能性液体肥料。
                        </p>
                    </div>
                </div>
            </div>
            <div class="layout-desc clearfix dn" data-content="yunnan">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">云南金正大生态工程有限公司</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">
                        云南中正化学工业有限公司是一家从事磷化工产品生产与销售的研发型企业,于2011年被金正大集团全资收购。公司坐落于云南省昆明市晋宁县二街工业园区,占地近100亩,现有员工400余人,建有粉状磷酸一铵及其配套硫磺制酸生产装置及水溶肥生产线,采用了先进的生产工艺流程,生产的磷酸一铵(MAP)、水溶肥、氟硅酸等产品出口到韩国、越南、老挝等东南亚国家,国内主要销往黑龙江、上海、山东、浙江等十余个省市。云南公司的设立,将进一步优化公司产业布局,降低运输成本,拓宽在西南地区的市场份额。同时公司依托当地的磷矿、煤矿等矿产资源,进行磷资源深加工,可实现公司产业链向上游延伸的纵向扩张,弥补公司缺乏原材料成本优势的短板,丰富产品线,提升盈利水平,实现生产布局进一步优化。
                        </p>
                    </div>
                </div>
            </div>
            <div class="layout-desc clearfix dn" data-content="Espana">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img  src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">Navasa公司</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">
                            A.Navarro, S.A.(以下简称“Navasa公司”)位于西班牙南部阿尔梅里亚省。Navasa 公司在阿尔梅里亚地区的农业经营活动有五十多年,目前已成为当地有知名度和影响力的农业服务提供商。 Navasa
                        公司经营范围是肥料、植保产品、杀虫剂等相关生产、销售和技术服务,包括液体固体肥料的存储、分装、批发以及一些大型跨国公司农资产品的区域经销。2016年6月30日,金正大生态工程集团股份有限公司控股子公司德国金正大有限公司之全资子公司
                        KingentaInvestco,S.L.与西班牙 A.Nava, S.A.两大股东签署了《股权买卖协议》,金正大西班牙公司以 5,565,000 欧元价格收购卖方持有 Navasa 公司
                        70%的股权,并于9月完成了本次收购的全部交割工作。
                        </p>
                    </div>
                </div>
            </div>
            <div class="layout-desc clearfix dn" data-content="vietnam">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">金正大越南办事处</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">
                        金正大越南办事处2015年成立,位于越南最大城市胡志明市。越南办事处是集团定位东南亚市场的海外布局之一。越南办事处业务包括产品销售、品牌推广、高新技术产品联合研发、试验示范等基础性营销推广,同时涉及海外资产布局,核心技术国际化保护,疏通集团海外进出口渠道,打造境外运营基地等。
                        </p>
                    </div>
                </div>
            </div>
            <div class="layout-desc clearfix dn" data-content="germany">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">金正大德国分支机构</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">
                            2016年4月7日,金正大集团发布公告,以不超过1.16亿欧元(约8.5亿元人民币)的价格收购Compo AcquiCo
                            S.à.r.l.(卢森堡康朴公司)旗下康朴公司园艺业务100%股份。Compo AcquiCo S.à.r.l.(卢森堡康朴公司)旗下包括COMPO GmbH(德国康朴公司)、 COMPO
                            France SAS(法国康朴公司)、 COMPO Italia S.r.l.(意大利康朴公司)在内的24家从事家用园艺业务公司的股份。
                            当地时间7月12日,金正大集团在德国法兰克福举行并购德国康朴公司(Compo GmbH)交割签约仪式。
                            康朴公司成立于1956年,是一家有着60年历史的全球知名肥料企业,是全球园艺及城市消费高端肥料市场领导者。
                        </p>
                    </div>
                </div>
            </div>
            <div class="layout-desc clearfix dn" data-content="Netherlands">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">荷兰分支机构</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">
                            2016年1月,金正大全资子公司金正大(香港)投资有限公司通过在荷兰设立的EKOMPANY INTERNATIONAL B.V.与荷兰EKOMPANY AGRO
                            B.V.签署了《资产购买协议》,以610万欧元价格收购荷兰包膜缓控释肥、掺混控释肥生产企业EKOMPANY AGRO B.V.公司资产。
                            EKOMPANY位于荷兰BORN,处于德国、比利时、荷兰交界处。成立于2010年,主要生产包膜缓控释肥、掺混控释肥的生产,拥有4万吨/年包膜缓控释肥生产线,6万吨/年掺混肥料生产线,于2013年建成投产,产能占欧洲包膜缓控释肥产能的45%,为欧洲产能最大的包膜缓控释肥企业。本次收购使公司快速获得了欧洲最大的缓控释肥生产基地,进一步提高公司在控释肥领域的国际竞争力。
                        </p>
                    </div>
                </div>
            </div>
            <div class="layout-desc clearfix dn" data-content="israel">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">利夫纳特农业科技研究中心</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">
                        金正大—利夫纳特农业科技研究中心成立于2014年11月,是金正大在以色列特拉维夫设立的海外研发机构。该中心立足中以双方资源优势,追踪国际先进农业技术、开展高级技术人才的培训、农业新技术项目的国际合作研究、现代农业示范园建设和水肥一体化示范推广等,并根据研究组织各类学术研讨会。该中心将成为金正大从以色列引进先进农业技术的窗口和桥梁,推动以色列农业技术及优良作物品种在中国的应用推广。
                        </p>
                    </div>
                </div>
            </div>
            <div class="layout-desc clearfix dn" data-content="usa">
                <div class="layout-pic">
                    <a href="javascript:void(0);" style="display: block;">
                        <img  src="img/1.jpg"/>
                    </a>
                </div>
                <div class="layout-tab">
                    <ul class="layout-tab-title">
                        <li class="current"><a href="javascript:void(0);">金正大集团北美办事处</a></li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="layout-tab-cont">
                        <p style="display: block;">
                        金正大集团北美办事处位于美国洛杉矶,成立于2015年10月,作为金正大在北美的一个窗口,办事处围绕技术研发、信息收集、合作交流、产品贸易等开展工作,引进国际先进技术和高端人才,推动金正大新技术、新产品走向国际。“金正大(美国)新型肥料研发中心”2006年在华盛顿设立,主要从事缓控释肥的研发、技术合作、北美地区试验示范等。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 焦点图 幻灯片 轮播图 bar焦点图 其他 地图 中国地图 世界地图 带简介的焦点图 选项卡自动切换 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到