Question

我正在设计自己的标签，用于标签导航，我使用的是google api和jquery。

这是我的小提琴，

http://jsfiddle.net/raghavendram040/fk7y2d5L/2/

但是在小提琴中我没有添加google api链接。

这是我的js代码

google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{

$("header ul li a").click(function(e) {
    e.preventDefault();

    $("header ul li a").each(function() {
        $(this).removeClass("active");  
    });

    $(this).addClass("active");

            var tabtitle=$(this).attr("title");
    $.show('#tab'+tabtitle);
});
});

我正在尝试点击每个标记，我试图显示相应的div标记。但我无法做到这一点。任何人都可以帮助我。

Answer 1

试试这个：你不需要google api。只需在html页面中包含jquery库，如下所示。将代码放在$(function(){..});中，这将确保在加载整个DOM结构后应用脚本。

有关jQuery访问的更多信息 - JQuery.com

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



$(function()
{
    // Just for demonstration purposes, change the contents/active state using jQuery
    $("header ul li a").click(function(e) {
        e.preventDefault();

        // remove active class from all tabs
        $("header ul li a").removeClass("active");  
        // hide all tab div
        $('div[id^="tab"]').hide();

        //add active class to clicked tab
        $(this).addClass("active");

        // show clicked tab content div
        var tabtitle=$(this).attr("title");
        $('#tab'+tabtitle).show();
    });
});

<强> Demo

Answer 2

JSFiddle：http://jsfiddle.net/TrueBlueAussie/fk7y2d5L/11/

$(function () {
    // Just for demonstration purposes, change the contents/active state using jQuery
    $("header ul li a").click(function (e) {
        e.preventDefault();

        // Remove the active class from any anchors that have it
        $("header ul li a.active").removeClass("active");

        // Add active to the selected anchor
        $(this).addClass("active");

        var tabtitle = $(this).attr("title");

        // Hide all divs that start with id=tab
        $('#main div[id^=tab]').hide();

        // Show the selected div
        $('#tab' + tabtitle).show();
    });

    // initial hide of all tabs
    $('#main div[id^=tab]').hide();

    // Trigger initial selection
    $('header a.active').trigger('click');

});

Answer 3

首先，你需要隐藏标签，让我们通过为所有相应的tab添加一个类<div>以及以下css来实现这一点

.tab {
  display:none;
}

然后通过将下面给出的类visible应用于它，将最初激活的选项卡设置为可见。

div.tab.visible {
  display:block;
}

现在您可以使用以下JS来使其工作：

$("header ul li a").click(function (e) {
  e.preventDefault();

  $(".active").removeClass("active"); // you don't need to iterate over using each
  $(this).addClass("active");

  var tabtitle = $(this).attr("title");
  $("#main div.tab.visible").removeClass("visible"); // hide actve tab
  $('#tab' + tabtitle).addClass("visible"); // show selected tab
});

Updated Fiddle

旁注：我添加了缺少的标签blog，并为演示添加了相应的文字

Answer 4

首先。除了jQuery之外别无其他。

其次：就个人而言，我会将所有标签默认为隐藏，并且仅在＆＃34;活动时显示它们。上课就在他们身上。

此外，您可能希望在选项卡和选项卡内容中添加一些实际的类名，以便更好地控制。＆＃34; .TAB＆＃34;对于标签，＆＃34; .tab-content＆＃34;对于内容。

javascript代码非常简单易懂：

$(function()
{
    $(".tab").click(function(e) {
        e.preventDefault();

        $(".tab.active, .tab-content.active").removeClass("active");    

        $(this).addClass("active");
        var tabtitle = $(this).attr("title");
        $('#tab'+tabtitle).addClass("active");
    });
});

JSFiddle with new class names

如何在单击的特定选项卡上选择<div>？</div>

4 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/fk7y2d5L/11/

Updated Fiddle