Question

我有以下HTML：

<div class="bubble">
        <div class="content recommend" style="display: block; ">
        <h1>Recommend to your friends</h1>

        <div id="bubble_tabs">    
            <ul style="font-size:11px;">
                <li id="tab1"><a class="" href="#" onclick="switch_bubble_tab(this,'#friends_inveni');return false;">Favor</a></li>
                <li id="tab2"><a href="#" onclick="switch_bubble_tab(this,'#friends_facebook');return false;" class="active">Facebook</a></li>
            </ul>
        </div>

        <div id="friends_favor" class="friends_rec" style="display: none; ">
                <br>
                You currently have no friends. <a style="text-decoration:underline;" href="/Friends/Invite/">Invite friends</a> or send them a recommendation via Facebook or Email.
        </div>

        <div id="friends_facebook" class="friends_rec" style="display: block; ">
            <iframe src="" style="overflow:hidden;width:350px;height:400px;"></iframe>
        </div>

        </div>

</div>

我想实现switch_bubble_tab，这样当单击选项卡时，它会显示传递给该函数的div id。我该怎么做？

Answer 1

function switch_bubble_tab(obj) {
$(".friends_rec").hide(); 
$(".friends_rec").eq($(obj).parents("li").index()).show();
//HTML below: 
<li id="tab1"><a class="" href="#" onclick="switch_bubble_tab(this);">Favor</a></li>

使用javascript onclick切换标签页

1 个答案: