Question

我有两个<ul>选项的<li>标记，点击每个我需要显示的相关数据只有

这是我的程序

<div id="divforhistoricresults" class="classhistoricaldataresults">
   <div class="list-container-2">
      <ul class="tabs-2 clearfix">
         <li><a href="#one">Data</a></li>
         <li><a href="#two">Chart</a></li>
      </ul>
   </div>
   <div class="tab-container-2">
      <table id="one" class="tab-content-1 table table-striped">  
      </table>
      <table id="two" class="tab-content-1 table table-striped">                        
      </table>
   </div>
</div>


$(document).ready(function() {});
$("ul.tabs-2 li").click(function()
{
    var tabclicked = $(this).find("a").attr("href");
    if (tabclicked === '#one')
    {
        var onehtml = '<thead><th>ONE</th>';
        $("#one").html(onehtml);
     //   $("#two").hide();
    }
    else if (tabclicked === '#two')
    {
        var twohtml = '<thead><th>TWO</th>';
        $("#two").html(twohtml);
      //  $("#one").hide();
    }
});

我面临的问题是两者都可见？是否可以使表id="one"默认显示？

您能否告诉我如何解决上述问题

这是我的小提琴

http://jsfiddle.net/jq4f69cz/4/

Answer 1

<强> Updated fiddle

在附加html并取消注释show()方法之前添加hide()方法：

 $("#one").show().html(onehtml);
 $("#two").show().html(onehtml);

要将一个显示为默认值，请在事件后添加以下行：

$('ul.tabs-2 li:eq(0)').click();

希望这有帮助。

$("ul.tabs-2 li").click(function()
{
	var tabclicked = $(this).find("a").attr("href");
	if (tabclicked === '#one')
	{
	    var onehtml = '<thead><th>ONE</th>';
	    $("#one").show().html(onehtml);
            $("#two").hide();
	}
	else if (tabclicked === '#two')
	{
	    var twohtml = '<thead><th>TWO</th>';
	    $("#two").show().html(twohtml);
            $("#one").hide();
	}
});

$('ul.tabs-2 li:eq(0)').click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divforhistoricresults" class="classhistoricaldataresults">
   <div class="list-container-2">
      <ul class="tabs-2 clearfix">
         <li><a href="#one">Data</a></li>
         <li><a href="#two">Chart</a></li>
      </ul>
   </div>
   <div class="tab-container-2">
      <table id="one" class="tab-content-1 table table-striped">  
      </table>
      <table id="two" class="tab-content-1 table table-striped">                        
      </table>
   </div>
</div>

如何仅对应li标签相关数据

1 个答案: