链接区域从一个组件映射到另一个组件中的特定ngb-tab

时间:2017-10-07 22:12:48

标签: javascript html twitter-bootstrap angular

在一个组件中,我有一个img地图,其中有不同的区域作为链接工作,在另一个组件中我有一个来自https://ng-bootstrap.github.io/#/components/tabs/examples的tabSet,我希望img地图的某些区域与特定的链接标签。

类似于:codificador#idTab1

具有Img Map和Area的组件 - href

<div style="overflow-y:auto;">
   <img  src="https://image.ibb.co/koxX8k/MENU2.png" usemap="#menu" border=0>
   <map  name="menu">
       <area shape="rect" coords="202,26,315,119" href="codificador#idTab1"  alt="" title="">
       <area shape="rect" coords="203,153,316,247" href="codificador#idTab2"  alt="" title="">
       <area shape="rect" coords="202,282,315,375" href="codificador#idTab3"  alt="" title="">
       <area shape="rect" coords="411,140,462,260" href="multiplexor"  alt="" title="">
       <area shape="rect" coords="591,140,641,259" href="remux"  alt="" title="">
       <area shape="rect" coords="769,140,819,260"   href="modulador" alt="" title="">
       <area shape="poly" coords="319,68,348,68,348,168,394,168,394,161,410,171,394,180,394,173,341,173,341,74,320,74,320,68"  (click)="ASI1()" alt="" title="">
       <area shape="poly" coords="318,196,394,196,394,190,411,200,394,209,394,202,320,202,320,195"(click)="ASI2()"   alt="" title="">
       <area shape="poly" coords="319,326,342,326,342,227,395,227,394,222,410,231,394,240,394,234,348,234,348,331,319,331,319,325" (click)="ASI3()"  alt="" title="">
       <area shape="poly" coords="466,197,573,197,573,190,592,199,574,209,574,202,466,202,466,197" (click)="TSmethod()"alt="" title="">
       <area shape="poly" coords="645,196,752,196,752,191,769,199,752,208,752,203,646,202,646,197" (click)="BTSmethod()" alt="" title="">
    </map>                
</div>

以下是Codificador组件中的标签集

<ngb-tabset>
    <ngb-tab id="idTab1"  >
        <ng-template ngbTabTitle> <b> Tab1</b> </ng-template>
            <ng-template ngbTabContent  >
            </ng-template>
     </ngb-tab>  
     <ngb-tab id="idTab2" >
         <ng-template ngbTabTitle> <b> Tab2</b> </ng-template>
              <ng-template ngbTabContent  >
              </ng-template>
     </ngb-tab>  
     <ngb-tab id="idTab3"  >
          <ng-template ngbTabTitle> <b> Tab3</b> </ng-template>
               <ng-template ngbTabContent  >
               </ng-template>
     </ngb-tab>  
</ngb-tabset>

0 个答案:

没有答案
相关问题