Onclick for tab无法正常工作

Question

这就是我在布局视图中的内容。 “主页”选项卡和“待办事项”选项卡。

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

这里的问题是我试图点击待办事项选项卡，但似乎onclick无效。请帮忙！感谢。

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>

查看this链接以获取更多信息