Question

我的问题是，当我点击此标签时，第一个标签<a href="#" onclick="displaydetails()">click me </a>上有一个链接应生成另一个标签。焦点应仅转到该标签。第二个标签已隐藏。

<link rel="stylesheet" type="text/css" href="./compo.css"/>
<script type="text/javascript" src="./jquery-1.7.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="tabs-2.js" charset="utf-8"></script>
<title>"Tab sheet 2" demo &mdash; Component Library</title>
<script type="text/javascript">
        function displaydetails() {
            document.getElementById("tab2").style.display = "";

        }
    </script>
</head>
<body class="COMPO">
<!-- Wrapper -->
<div id="wrapper">
    <!-- Container -->
    <div id="container" class="resolution_800x600">
        <!-- tabpanel_customer_data -->
        <div id="tabpanel-demo" class="tab_panel_2 clear">
            <ul id="tabpanel-liste" class="tab_menu clear">
                <li id="tab1" class="tabpanel-tabbar-item tab_active"><a href="#content01" class="tabpanel-tabbar-link">Tab 1</a></li>
                <li  id="tab2" class="tabpanel-tabbar-item" style="display:none"><a href="#content02" class="tabpanel-tabbar-link" >Tab 2</a></li>

            </ul>
            <!-- Tab_content 01 -->
            <div id="content01" class="tab_panel_content_2">
                <h3 class="title_n2" id="tab-1">tab 1</h3>
                <div class="texts">
                    <p>
                        <a href="#" onclick="displaydetails()">click me </a>
                    </p>
                </div>
                <!-- /bloc_consultation -->             
            </div>
            <!-- /Tab_content 01 -->
            <!-- Tab_content 02 -->
            <div id="content02" class="tab_panel_content_2">
                <h3 class="title_n2" id="tab-2">tab 2</h3>
                <div class="texts">
                    <p>
                        Content of the 2nd tab
                    </p>
                </div>
                <!-- /bloc_consultation -->     
            </div>
            <!-- /Tab_content 02 -->

        </div>
        <!-- /tabpanel_customer_data -->                
    </div>
    <!-- /Container -->
</div>
<!-- /Wrapper -->

js

var hideClass = "hide";
var tabClass = "tab_panel_2";
var activeClass = "tab_active";
var itemClass   = "tabpanel-tabbar-item";
var linkClass   = "tabpanel-tabbar-link";
var panelClass  = "tab_panel_content_2";
var spanClass   = "span_tab";

$(document).ready(function() {
    $("."+panelClass).addClass(hideClass);

    $("div."+tabClass+" ul li."+itemClass).each(function() {
        var link = $(this).children("a");
        $(this).append("<span class=\""+spanClass+"\">"+link.html()+"</span>");
        $(this).children("span."+spanClass).hide();
    });


    $("div."+tabClass+" ul li."+activeClass+" a."+linkClass).each(function() {
        $("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
        $(this).hide();
        $(this).siblings("span."+spanClass).show();
    });


    $("div."+tabClass+" ul li."+itemClass+" a."+linkClass).click(function() {
        $(this).parents("div."+tabClass).children("."+panelClass).addClass(hideClass);

        $(this).parents("li."+itemClass).siblings("li."+itemClass).children("span."+spanClass).hide();
        $(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show();

        $("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
        $(this).hide();
        $(this).siblings("span."+spanClass).show();
        return false;
    });
});

使用jquery关注点击链接的新选项卡

0 个答案: