使用 javascript onclick 切換標簽

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，以便在單擊選項卡時顯示傳遞給 function 的 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>