Question

我正在为我们正在制作的网站做排行榜。

基本上，我们有一个div，这个月有位置A的胜利者

下面我们有ajax标签，用户可以点击与位置相关的标签，例如：

位置A. 位置B. 等等

因此，默认情况下，页面加载时，选项卡A处于打开状态。上面的div我们需要提供一个匹配的ID，因为......

我希望当用户单击选项卡B以使用不同的DIV ID更改上面的div时。所以基本上我们可以根据用户点击的标签更改div中的内容。

所以内容div就像：

<div id="???"> content goes here </div>

标签如下：

<ul class="tabs"> 
                    <li><a href="#tab1"><span class="stateTab">NSW</span></a></li> 
                    <li><a href="#tab2"><span class="stateTab">QLD</span></a></li> 
                    <li><a href="#tab3"><span class="stateTab">VIC</span></a></li> 
                    <li><a href="#tab4"><span class="stateTab">SA</span></a></li> 
                    <li><a href="#tab5"><span class="stateTab">WA</span></a></li> 
                    <li><a href="#tab6"><span class="stateTab">ACT</span></a></li> 
                    <li><a href="#tab7"><span class="stateTab">NT</span></a></li> 
                    <li><a href="#tab8"><span class="stateTab">TAS</span></a></li>
                    <li><a href="/leaderboard/australia/"><span class="stateTab">AUSTRALIA</span></a></li>
                </ul>

因此，如果用户点击#tab2，则会将另一个DIV加载到div id =“???”

我认为它相当简单，只是想不出来。我意识到我可能需要设置所有的div，就像这样：

<div id="tab1"> content goes here </div>
<div id="tab2"> content goes here </div>
<div id="tab2"> content goes here </div>

并设置隐藏于div的可见性..任何帮助赞赏。

*** 已添加信息 的 ** * ****

选项卡，onclick（当前）显示来自dataTables的内容。很明显，当我们点击tab1时，标签下方的内容会显示从我们的dataTables获取的内容，在一个id为id1的div中

现在的问题是，想要更改选项卡上面的内容以及选项卡下面的内容...... 2个ID是冲突的，一个显示，一个隐藏......

TABS也改变了他们下面的内容，大概我们需要以某种方式链接id动作，以使两组内容和谐地改变

Answer 1

按照您计划的方式将其添加样式=“display：none”添加到每个div，默认情况下除了您要显示的div之外。然后添加到您的javascript（在底部或$(function(){ //Document ready });

$('.tabs a').click(function(){
        $('div[id^=tab]').hide();
        $(this.href).show();
        return false;
    }
);

对于您的更新，您可以将您的div更改为具有类而不是ID。喜欢内容高于1 内容超过2

标签

 <div class="tab1 tabContent">Content Below 1</div>
 <div class="tab2 tabContent">Content Below 2</div>

然后你可以改变javascript：

$('.tabs a').click(function(){
        $('div.tabContent').hide();
        $('div.'+this.href).show();
        return false;
    }
);

您还需要从锚点中删除哈希值，因此href变为“tab1”而不是“＃tab1”

Answer 2

您可以使用jQuery执行此操作：http://jsfiddle.net/YQdQm/

不确定这是否完全符合您的要求（还有，尚未在IE上测试过）。

var tabs = $('div[id^=tab]');
tabs.hide();
$('#tab1').show();
$('.tabs a').click(function () {
    var tab_id = $(this).attr('href'); 
    tabs.hide();
    $(tab_id).show(); 
});

Answer 3

我建议使用jquery UI中的现有tab control

然而，如果不是，你将需要这样的标记

<div class='tabs'>
<ul>
<li data-id='tab1'>tab 1</li>
....
</ul>
<div id='tab1'></div>
<div id='tab2' class='expanded'></div>
...
</div>

和代码

$('.tabs ul li').bind('click',function() {
    var id = $(this).data('id');
    $('.tabs div').removeClass('expanded');
    $('#'+id).addClass('expanded');    
});

Answer 4

我知道这有点蛮力，但我喜欢这样做：

JS：

    function hidetabs(){
     $("#tab1").hide();
     $("#tab2").hide();
     //And so on
    }

   function shobwtab(id){ 
    $("#"+id).show();
      hidetabs();
   }

HTML：

   <li><a href="#tab1" onClick="showtab('tab1')"><span class="stateTab">NSW</span></a></li>

当然，您也可以在docready函数中添加单击侦听器来运行函数，而不是使用onClick。

根据点击的TAB更改DIV

4 个答案: