我正在使用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 echo 'some text'; ?>
包装在例如<p>
标签中,并将此代码添加到按钮标签中的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>
也许你需要在你的“Some Text”php中添加一些id或类,比如
<span id="abc"><?php echo "Some Text"; ?></span>
所以你可以使用jquery或javascript这样的onclick按钮来访问它
onclick="somefunction()"
和
somefunction() {
$('#abc').html("");
}
按照你目前的情况,我会进行以下编辑:
<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
e.g
的元素定位<input>
。我认为你需要添加一些jquery来删除文本。
首先,您需要使用id内容将文本放在span中,并使用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>