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/

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

2 个答案: