[英]Button to Clear text with Bootstrap
我正在使用Bootstrap生成選項卡。 我有一個重置按鈕,可清除選項卡中的內容,但不起作用。 這是我的代碼:
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<?php echo "Some text" ?>
<br><br>
<button type="button" class="btn btn-primary" value="Reset" onclick="document.nav-tabContent.nav-home.value=''">Clear</button>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
</div>
因此,我的“清除”按鈕應清除文本“某些文本”。 用按鈕清除文本該怎么辦?
TKS
也許您需要在“某些文本” php中添加一些ID或類,例如
<span id="abc"><?php echo "Some Text"; ?></span>
因此,您可以使用jquery或javascript這樣的onclick按鈕來訪問它
onclick="somefunction()"
和
somefunction() {
$('#abc').html("");
}
您可以嘗試包裝<?php echo 'some text'; ?>
<?php echo 'some text'; ?>
(例如<p>
標記)並將此代碼添加到button標記的onlick事件中
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
試試這個有很多標簽的實時示例
const navItems = document.querySelectorAll('.nav-item') const tabPanes = document.querySelectorAll('.tab-pane'); navItems.forEach(item => item.addEventListener('click', clear)); function clear(event) { event.preventDefault(); const element = event.target; const paneId = element.getAttribute('href').split('#')[1]; const pane = document.querySelector(`#${paneId}`); clearNavItems(); clearPanes(); element.classList.add('active'); pane.classList.add('show'); pane.classList.add('active'); } function clearNavItems() { navItems.forEach(item => item.classList.remove('active')); } function clearPanes() { tabPanes.forEach(pane => { pane.classList.remove('active'); pane.classList.remove('show'); }); }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus qui, pariatur ipsum ducimus numquam porro optio adipisci, nemo, cupiditate unde mollitia accusantium, suscipit. Explicabo, officiis corrupti praesentium. Quis, unde, fugit.</p> <button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button> </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto.</p> <button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button> </div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa mollitia unde perspiciatis?</p> <button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button> </div> </div> </div>
根據您當前擁有的內容,我將進行以下編輯:
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<p id="nav-home-text"><?php echo "Some text" ?></p>
<br><br>
<button type="button" class="btn btn-primary" value="Reset" onclick="document.getElementById('nav-home-text').innerHTML=''">Clear</button>
</div>
nav-home
也會明確表示,他button
作為button
的一部分nav-home
<p>
並為其指定一個id
以便您可以使用document.getElementById()
從按鈕定位目標 .value
用作具有value
屬性的元素, eg
<input>
。 我認為您需要添加一些jquery來刪除文本。
首先,您需要將文本與id 內容一起放在跨度內,並使用jquery清除內容內的文本。
你可以用這個
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<span id="content"><?php echo "Some text" ?></span>
<br><br>
<button class="btn btn-primary" onclick="$('#content').text('');">Clear</button>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.