html - Onclick for tab not working

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

// 代わりにこのコードを使用..

<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

このコードを使用すると機能します コンテンツを非表示にするために機能するこの JavaScript を使用します

<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

JQuery UI を使用できます。

<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>

詳細については、このリンクを確認してください