Question

我正在动态创建标签，并且不确定如何在创建标签后将第一个标签设置为活动标签。我在创建列表项时尝试添加active，但这显然是错误的，因为所有项都激活了类。

<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum- 
scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>My Consent Form</title>
<link rel="canonical" href="https://example.com/items/55555" />
<script async custom-element="amp-consent" 
src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
<script async custom-element="amp-geo" 
src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script> 
<link href="https://fonts.googleapis.com/cssfamily=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.ampstart-btn,.ampstart-btn:visited{color:#DFE4E4}.ampstart-btn{font-family:'Roboto',sans-serif;font-weight:500;font-size:1rem;line-height:1.4;padding:.7em .8em;text-decoration:none;white-space:nowrap;word-wrap:normal;vertical-align:middle;cursor:pointer;background-color:#7e50bb;border:1px solid #8c62c2}.ampstart-btn:active .ampstart-btn:focus{opacity:.8}.ampstart-btn[disabled],.ampstart-btn[disabled]:active,.ampstart-btn[disabled]:focus,.ampstart-btn[disabled]:hover{opacity:.5;outline:0;cursor:default}.ampstart-btn-reject{background-color:#bb5058;color:#fff;border:1px solid #bb5058}.ampstart-btn-reject:visited{color:#fff}.ampstart-btn-accept{background-color:#8dbb50;color:#fff;border:1px solid #8dbb50}.ampstart-btn-accept:visited{color:#fff}.m1{margin:1rem}.consent-msg {font-family:'Roboto',sans-serif;font-weight:400;}.consent-headline {font-family: 'Patua One', cursive; font-size:36px;}.consentPopup{padding:20px;margin:0 auto;background:#F8F7D3;border-radius:5px;position:relative;max-width:700px;width:95%} .popupOverlay{height:100vh;width:100vw;background:F8F7D3;padding:5% 0}.dismiss-button{position:absolute;right:24px;top:16px;cursor:pointer} .amp-caps {text-transform: uppercase;letter-spacing: 0}.popupOverlay p{ color: #333333; padding:15px; }.mx1 {margin-left: 0rem}.mx1{margin-right: 0rem}
</style>
</head>
<body>
<amp-geo layout="nodisplay">
<script type="application/json">
{
"ISOCountryGroups": {
"eu": ["al", "ad", "am", "at", "by", "be", "ba", "bg", "ch", 
"cy", "cz", "de", "dk", "ee", "es", "fo", "fi", "fr", "gb", 
"ge", "gi", "gr", "hu", "hr", "ie", "is", "it", "lt", "lu", 
"lv", "mc", "mk", "mt", "no", "nl", "po", "pt", "ro", "ru", 
"se", "si", "sk", "sm", "tr", "ua", "uk", "va"]
}
}
</script>
</amp-geo>

<amp-consent id="myUserConsent"
layout="nodisplay">
<script type="application/json">
{
"consents": {
"eu": {
"promptIfUnknownForGeoGroup": "eu",
"promptUI": "myConsentFlow"
}
},
"postPromptUI": "post-consent-ui"
}
</script>
<div id="myConsentFlow"
class="popupOverlay">
<div class="consentPopup">
<div class="dismiss-button"
role="button"
tabindex="0"
on="tap:myUserConsent.dismiss">X</div>

<div class="h3 option-font m1 consent-headline">Please choose an option.</div>
<p class="m1 consent-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="https://example.com/privacy-policy-amp.pdf">Learn more</a>. 
</p>
<button on="tap:myUserConsent.accept"
class="ampstart-btn ampstart-btn-accept amp-caps mx1">I accept 
cookies</button>
<button on="tap:myUserConsent.reject"
class="ampstart-btn ampstart-btn-reject amp-caps">I refuse 
cookies
</button>
</div>
</div>

<div id="post-consent-ui">
<button on="tap:myUserConsent.prompt()"
class="ampstart-btn amp-caps m1">Manage my cookie settings</button>
</div>
</amp-consent>
</body>
</html>

var junkData = [
        { "ID": "1", "AreaName": "Area A" },
        { "ID": "2", "AreaName": "Area B" },
        { "ID": "3", "AreaName": "Area C" },
        { "ID": "4", "AreaName": "Area D" },
        { "ID": "5", "AreaName": "Area E" }
    ];
    
$(document).ready(() => {

        CreateTabs();

        GetTabEvent();
    });

    function GetTarget(e) {
        var target = $(e.target).attr("href");
        console.log(target);
    }

    function CreateTabs() {
        for (i = 0; i < junkData.length; i++) {
            $('#List').append("<li id='" + junkData[i].ID + "' class='nav-item'><a class='nav-link' href='" + junkData[i].AreaName + "' data-toggle='tab'>" + junkData[i].AreaName + "</a></li>");
        }
    }

    function GetTabEvent() {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $('.nav-link li.active').removeClass("active");
            GetTarget(e);
            $(this).addClass('active');
        });
    }

.nav-tabs > li > a {
        padding-top: 4px;
        padding-bottom: 4px;
    }

Answer 1

您不需要所有标签事件或GetEventTarget功能。

以下是使用内置Bootstrap $().tab方法的一种方法：

var junkData = [
        { "ID": "1", "AreaName": "Area A" },
        { "ID": "2", "AreaName": "Area B" },
        { "ID": "3", "AreaName": "Area C" },
        { "ID": "4", "AreaName": "Area D" },
        { "ID": "5", "AreaName": "Area E" }
    ];
    
$(document).ready(() => {

        CreateTabs();

        GetTabEvent();
    });

    function CreateTabs() {
        for (i = 0; i < junkData.length; i++) {
            $('#List').append("<li id='" + junkData[i].ID + "' class='nav-item'><a class='nav-link' href='" + junkData[i].AreaName + "' data-toggle='tab'>" + junkData[i].AreaName + "</a></li>");
        }
    }

    function GetTabEvent() {
	  $('ul#List [data-toggle="tab"]').tab();
      $('ul#List li:first-child [data-toggle="tab"]').tab('show');
    }

.nav-tabs > li > a {
        padding-top: 4px;
        padding-bottom: 4px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="DynamicTabsWrapper">
    <ul id="List" class="nav nav-tabs"></ul>
</div>

Answer 2

你可以带李第一个孩子和addClass =＆＃34;活跃＆＃34;就像

一样

$( "li" ).first().addClass("active" );

如何在动态创建标签时将标签设置为活动状态？

2 个答案: