Onclick pour l'onglet ne fonctionne pas

Question

C'est ce que j'ai dans ma vue de mise en page. Onglet Accueil et onglet À faire.

et codes dans mon html:

<div id="tabs"> 

<ul> 
    <li id="li_tab1" onclick="HomeTab"><a>Home</a></li> 
    <li id="li_tab2" onclick="ToDoTab"><a>To Do</a></li> 
</ul> 

<div id="Content_Area"> 
    <div id="HomeTab"> 
     <p>Home tab content goes here.</p> 
    </div> 

    <div id="ToDoTab" style="display: none;"> 
    <p>To Do tab content goes here.</p> 

Le problème est que je ici essayé de cliquer sur l'onglet à faire, mais il semble que le onclick ne fonctionne pas. S'il vous plaît aider! Merci.

Answer 1

// utiliser ce code istead de ce ..

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<div id="tabs"> 

<ul> 
<li id="li_tab1"><a href="#HomeTab">Home</a></li> 
<li id="li_tab2"><a href="#ToDoTab">To Do</a></li> 
</ul> 

<div id="Content_Area"> 
<div id="HomeTab"> 
<p>Home tab content goes here.</p> 
</div> 

<div id="ToDoTab" style="display: none;"> 
<p>To Do tab content goes here.</p></div 

Utilisez ce code, il fonctionnera Utilisez ce javascript cela fonctionnera pour cacher le contenu

<script type="text/javascript"> 


var showcont = []; 
var showcont_containers = []; 
$('#tabs ul li a').each(function() { 
    // note that this only compares the pathname, not the entire url 
    // which actually may be required for a more terse solution. 
    if (this.pathname == window.location.pathname) { 
     showcont.push(this); 
     showcont_containers.push($(this.hash).get(0)); 
    }; 
}); 


$(showcont).click(function(){ 

     $(showcont_containers).hide().filter(this.hash).fadeIn(); 

}); 

</script> 

Answer 2

Vous pouvez utiliser l'interface utilisateur JQuery:

<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</script> 

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Tab 1</a></li> 
     <li><a href="#tabs-2">Tab 2</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Content of Tab 1</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Content of Tab 2</p> 
    </div> 
</div> 

lien Découvrez this pour plus d'informations