单击时，我的活动标签/占位符没有相应更改

Question

单击选项卡时，应在输入字段中更改占位符，并根据活动选项卡进行搜索。 有人可以看看为什么它不起作用吗？

我已经在此小提琴中发布了完整的代码： https : //jsfiddle.net/4bcog3f8/

  <script type="text/javascript"> function searchEncore() { var encoreBaseURLInput, encoreBaseURL, searchInput, scopeInput, searchString, scopeString, locationHref, charRegExString, base64Regex; /*base64_encoding_map includes special characters that need to be encoded using base64 - these chars are "=","/", "\\", "?" character : base64 encoded */ var base64_encoding_map = { "=": "PQ==", "/": "Lw==", "\\\\": "XA==", "?": "Pw==" }; var escapeRegExp = function(string) { return string.replace(/([.*+?^=!:${}()|\\[\\]\\/\\\\])/g, "\\\\$1"); } encoreBaseURLInput = document.getElementById("encoreBase"); searchInput = document.getElementById("encoreSearchInput"); if (searchInput && encoreBaseURLInput) { encoreBaseURL = encoreBaseURLInput.value; searchString = searchInput.value; for (var specialChar in base64_encoding_map) { charRegExString = escapeRegExp(specialChar); base64Regex = new RegExp(charRegExString, "g"); searchString = searchString.replace(base64Regex, base64_encoding_map[specialChar]) } searchString = encodeURIComponent(searchString); scopeInput = document.getElementById('encoreSearchLocation'); if (scopeInput) { scopeString = scopeInput.value; } if (scopeString) { scopeString = encodeURIComponent(scopeString); locationHref = encoreBaseURL + "C__S" + searchString + scopeString + "__Orightresult__U"; } else { locationHref = encoreBaseURL + "C__S" + searchString + "__Orightresult__U"; } languageSetting = document.getElementById("encoreLanguage"); if (languageSetting) { locationHref = locationHref + "?lang=" + languageSetting.value; } window.location.href = locationHref; } return false; } </script> 

Answer 1

简单CSS-标签：

 .tab, .linkinp {display: none;} /* Main trick */ #link1:checked ~ #tab1, #link2:checked ~ #tab2, #link3:checked ~ #tab3 {display: block;} /**************/ .linkinp:checked + .link { background-color: #259; color: #fff; } .link { width: 100px; display: inline-block; text-align: center; padding: 3px 0; background-color: #999; transition: 0.2s; border: 1px solid #333; cursor: pointer; } .tab { margin-top: 20px; height: 60px; padding-left: 5px; border-left: 3px solid #236; } 

 <input id="link1" class="linkinp" name="link" type="radio" checked> <label for="link1" class="link">First</label> <input id="link2" class="linkinp" name="link" type="radio"> <label for="link2" class="link">Second</label> <input id="link3" class="linkinp" name="link" type="radio"> <label for="link3" class="link">Third</label> <div id="tab1" class="tab">1 - 1 - 1 - 1 - 1</div> <div id="tab2" class="tab">2 - 2 - 2 - 2 - 2</div> <div id="tab3" class="tab">3 - 3 - 3 - 3 - 3</div> 

Answer 2

我希望这能帮到您

的JavaScript

//Remove Value from Input
var input = document.querySelector('[name="encoreSearchInput"]');
input.setAttribute('onblur','');
input.setAttribute('onfocus','');
input.setAttribute('value','');
//Set Initial Placeholder
input.setAttribute('placeholder','SEARCH CATALOG');
input.addEventListener('focus',function(){
    this.setAttribute('placeholder','');
});
input.addEventListener('blur',function(){
    this.setAttribute('placeholder','SEARCH '+document.querySelector('.uk-active a').textContent.toUpperCase());
});

//Tab Event
var tab_a = document.querySelectorAll('.uk-tab a');
Array.from(tab_a).forEach(a=>{
    a.addEventListener('click',function(e){
        e.preventDefault();
        var li = document.querySelectorAll('.uk-tab a');
        Array.from(li).forEach(lnk=>{ lnk.parentNode.classList.remove('uk-active'); });
        this.parentNode.classList.add('uk-active');
        document.querySelector('[name="encoreSearchInput"]').setAttribute('placeholder','SEARCH '+this.textContent.toUpperCase());
    });
});

在此处找到jsfiddle链接： https ://jsfiddle.net/khadkamhn/dajxrLwn/