Javascript 单击选项卡时如何更改占位符文本

我希望占位符相对于单击的选项卡进行更改。i、 e：目录-“搜索目录”网站-搜索网站

/*！CSS使用自：https://www.provolibrary.com/templates/provolibrary/css/pcl-general.css */
div，a，form{margin:0；padding:0；border:0；垂直对齐：基线；}
a、 答：访问{颜色：#4f2683；文本装饰：无；}
a:活动，a:悬停{文本装饰：下划线；}
a{font-weight:700；}
#搜索框a{font-weight:400；}
@手持媒体、屏幕和屏幕（最小宽度：620px）{
.search选项卡，.search选项卡链接{显示：内联；颜色：#fff；背景色：#7bc143；文本装饰：无；填充：8px；光标：指针；-webkit触摸标注：无；-webkit用户选择：无；-khtml用户选择：无；-moz用户选择：无；-ms用户选择：无；用户选择：无；}
.search选项卡：悬停{背景色：#807f83；}
.search选项卡。所选{颜色：#fff；背景色：#4f2683；}
.search选项卡链接{背景颜色：#009ddc；}
#搜索框{位置：相对；最小高度：100px；清除：两者；边距：-71px 0；浮动：右侧；显示：块；z索引：999；填充：0；}
#搜索框。搜索栏{背景：fff；高度：24px；边框底部：1px实心#807f83；边框左侧：1px实心#807f83；边框顶部：1px实心#807f83；}
#搜索框输入{浮点：左；边距：0；}
#搜索框输入：焦点{大纲：无；}
#搜索框#搜索文本图标{浮动：左；宽度：自动；高度：自动；位置：绝对；右：0；边距：-1px 15px 0 0；光标：指针；}
#搜索框#搜索文本{高度：23px；宽度：75%；边框：0；字体大小：13px；线条高度：23px；字体系列：Helvetica，Arial，无衬线；背景：透明；颜色：#000；边距：0；填充：0 11px；}
.search选项卡内容{背景颜色：#4f2683；填充：15px；页边空白顶部：8px；}
#搜索旧目录{文本对齐：左；}
}
@媒体屏幕和屏幕（最小宽度：1040px）{
#搜索框{top:40px；}
}
@手持媒体、屏幕和屏幕（最大宽度：619px）{
#搜索框{显示：无；}
输入[type=“text”]{-webkit外观：无；边框半径：0；}
}

目录
网站

如果您想要纯JS，请在每个div选项卡中单击一个

onClick

处理程序。看这把小提琴：

目录
网站
函数changeText（div）{
document.getElementById（“搜索文本”）.placeholder='search'+div.innerText；
}

使用简单易读的JavaScript相对简单

首先，您希望找到该类的所有元素

var searchTabs=document.querySelectorAll（'.search tab'）

然后，迭代每个元素并附加一个click侦听器

for (var i = 0; i < searchTabs.length; i++) {
    searchTabs[i].addEventListener('click', function(event) {

        var searchType = event.target.dataset.searchType;

        document.getElementById("search-text").placeholder = "Search " + searchType;
    });
}

for（var i=0；i

您将在上面的代码片段中看到，我已经为事件定义了一个处理程序

它将根据
数据搜索类型
属性替换元素（本例中为搜索栏）占位符

下面是一个例子。
这可以使用纯javascript完成

var tabs = document.getElementsByClassName('search-tab');
Array.prototype.forEach.call(tabs, function(tab){
    tab.onclick = function(e){
        var txt = e.target.getAttribute("data-search-type");
        document.getElementById("search-text").setAttribute("placeholder", "Search " + txt);
    }
});

HTML-

`

`
$（'input:text'）.attr（'placeholder'，'somenewtext'）你可以这样做没问题，很高兴它为你工作！如果你不介意点击upvote，这样它就不是一个否定的答案（不知道为什么有人投了反对票），我将不胜感激！
var tabs = document.getElementsByClassName('search-tab');
Array.prototype.forEach.call(tabs, function(tab){
    tab.onclick = function(e){
        var txt = e.target.getAttribute("data-search-type");
        document.getElementById("search-text").setAttribute("placeholder", "Search " + txt);
    }
});

<div class="search-tab" data-search-type="catalog"onclick="changePlaceHolder()">
    Catalog 
</div>

<input type="text" id="search-text" placeholder="Search Website" name="q">

function changePlaceHolder(){
    document.getElementById('search-text').setAttribute('placeholder', 'mytext');
}