2013-12-18 24 views
0

我有这样的标签隐藏彼此CSS和JavaScript:锚链接里面没有替代选项卡工作在手风琴效果

<div class="accordionContent"> 
     <div class="menusfondo"> 
      <div class="content"> 
       <ul class="tabs2"> 
       <li><a href="#scheda4" id="uno">INTRODUZIONE</a></li> 
       <li><a href="#scheda5">FILOSOFIA</a></li> 
       <li><a href="#scheda6">CASI DI SUCCESSO</a></li> 
       <li><a href="#scheda7">ULTIME INNOVAZIONI</a></li> 
       <li><a href="#scheda8">CONTATTI</a></li> 
      </ul> 
      <div class="contenitore_tab2"> 
       <div id="scheda4" class="contenuto_tab2"> 
        <h1>title</h1> 
        <h2>title2</h2> 
        <p>content <a href="#scheda5">link scheda 5</a>. content</p> 
       </div> 
       <div id="scheda5" class="contenuto_tab2"> 
         <h1> title</h1> 
         <h2> title2</h2> 
        <p>content</p> 
       </div> 
       <div id="scheda6" class="contenuto_tab2"> 
         <h1>title</h1> 
         <h2>title2 </h2> 
        <p>content</p></div> 
       <div id="scheda7" class="contenuto_tab2"> 
         <h1>title</h1> 
         <h2>title2</h2> 
        <p>content</p></div> 
      </div> 
     </div> 
    </div> 

       </div> 
      </div>    
    <div id="wrapper2"> 
    <div class="accordionButton uno"><div class="content"> 
    <h1>title</h1> 
    </div> 
    <div id="hidden"></div></div> 
    <div class="accordionContent "> 
     <div class="menusfondo"> 
      <div class="content"> 
      <ul class="tabs"> 
       <li><a href="#scheda1">INTRODUZIONE</a></li> 
       <li><a href="#scheda2">FILOSOFIA</a></li> 
       <li><a href="#scheda3">NEGOZIO ONLINE</a></li> 
       <li><a onclick="window.open('http://www.eurotesterpen.com/contact','_blank');">CONTATTI</a></li> 
      </ul> 
      <div class="contenitore_tab"> 
       <div id="scheda1" class="contenuto_tab"> 

不工作是div“scheda4”内的锚。它和每个标签菜单中的链接完全一样,但我不确定是否应该将它链接到JavaScript以使其工作。 javascript是:

$(document).ready(function() { 
$(".contenuto_tab2").hide(); //Nascondo tutti i contenuti 
$("ul.tabs2 li:first").addClass("active").show(); //Attivo il primo tab 
$(".contenuto_tab2:first").show(); //Mostro il primo contenuto (contenuto del primo tab) 

$("ul.tabs2 li").click(function() { 
    $("ul.tabs2 li").removeClass("active"); //Rimuovo tuttle le classi "active" 
    $(this).addClass("active"); //Attivo il tab selezionato 
    $(".contenuto_tab2").hide(); //Nascondo tutti i contenuti 

    var tabAttivo = $(this).find("a").attr("href"); //Prendo il valore dell'attributo href del tab per attivare il realtivo contenuto 
    $(tabAttivo).fadeIn(); //Faccio un Fade in per mostrare il contenuto dell'ID appena trovato 
    return false; 
}); 

});

为什么当我点击它时不显示正确的选项卡(scheda 5)?点击的效果是无,页面保持不变。请你能帮我一些忙吗?

+1

问题出在CSS中。请提供小提琴演示。 –

+1

取决于您的CSS和Javascript的工作方式。仅基于这些信息,您的问题无法得到解答。 – kapa

+0

我用javascript更新了问题... – softwareplay

回答

0

我做了这样的事情:

<div id="scheda4" class="contenuto_tab2"> 
       <h1>title</h1> 
       <h2>title2</h2> 
       <p class="link">content <a href="#scheda5">link scheda 5</a>. content</p> 
      </div> 
在JavaScript

然后,文档就绪函数中:

$("p.link").click(function() { 
    $("ul.tabs2 li").removeClass("active"); //Rimuovo tuttle le classi "active" 
    $('ul.tabs2 li a[href="#scheda5"]').addClass("active"); //Attivo il tab selezionato 
    $(".contenuto_tab2").hide(); //Nascondo tutti i contenuti 

    var tabAttivo = $(this).find("a").attr("href"); //Prendo il valore dell'attributo href del tab per attivare il realtivo contenuto 
    $(tabAttivo).fadeIn(); //Faccio un Fade in per mostrare il contenuto dell'ID appena trovato 
    return false; 
}); 

它的实际工作,除了这行:

$('ul.tabs2 li a[href="#scheda5"]').addClass("active"); //Attivo il tab selezionato 

但我真的不明白为什么......