使用Bootstrap清除文本的按钮

Question

我正在使用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

Answer 1

也许您需要在“某些文本” php中添加一些ID或类，例如

<span id="abc"><?php echo "Some Text"; ?></span>

因此，您可以使用jquery或javascript这样的onclick按钮来访问它

onclick="somefunction()"

和

somefunction() {
  $('#abc').html("");
}

Answer 2

您可以尝试包装<?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> 

Answer 3

根据您当前拥有的内容，我将进行以下编辑：

<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>

1. 靶向清除nav-home也会明确表示，他button作为button的一部分nav-home
   
2. 将文本包装在<p>并为其指定一个id以便您可以使用document.getElementById()从按钮定位目标
   
3. 您只应将.value用作具有value属性的元素， eg <input> 。

Answer 4

我认为您需要添加一些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>