Onclick for tab not working - html

Question

This is what I have in my layout view. Home tab and To Do tab.
And codes in my 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>
The problem here is I tried to click on the To Do tab but it seems that the onclick is not working. Please help! Thanks.

Answer 1

//use this code istead of that..
<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">Home</li>
<li id="li_tab2">To Do</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
Use this code it will work
Use this javascript it will work to hide the content
<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

You can use JQuery UI:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</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>
Check out this link for more information