Question

我在尝试显示/隐藏某些h4时遇到问题。目标是点击信息li链接，并在下一个h4结束时显示相应的table文字（一次一个），但这不起作用。

我尝试在我的JQuery中使用.css("display","none/block")，.style("display","none/block")和其他几个。

li链接代码

<table>
     <tr>
         <th><h2>Quick Facts</h2></th>
     </tr>
     <tr>
         <th>
             <ul style="font-size:15px">
                 <li id="_Join"><a href="#">How to join</a></li>
                 <li id="_Who"><a href="#">Who we are</a></li>
                 <li id="_Officers"><a href="#">Officers</a></li>
                 <li id="_Other1"><a href="#">Other</a></li>
                 <li id="_Other2"><a href="#">Other</a></li>
                 <li id="_Other3"><a href="#">Other</a></li>
             </ul>
         </th>
      </tr>
</table>

我要显示的h4文字

<table style="word-wrap: break-word">
   <tr>
      <th>
         <h4 class="informational" id="Join">How to join</h4>
         <h4 class="informational" id="Who">Who</h4>
         <h4 class="informational" id="Officers">Officers</h4>
         <h4 class="informational" id="Other1">Other1</h4>
         <h4 class="informational" id="Other2">Other2</h4>
         <h4 class="informational" id="Other3">Other3</h4>
      </th>
   </tr>
</table>

JQuery

$(document).ready(function () {
    $('.informational').hide();
});

$('[id^=_]').click(function () {
    $('.informational').hide();
    var naming = $(this).attr('id').replace('_', '');
    alert("selected ID is: " + naming); 
    document.getElementById(naming).show();
});

任何帮助表示赞赏！

P.S。如果有更好的方法，请告诉我。谢谢！

使用Bootstrap 3 / MVC 5

Answer 1

将document.getElementById(naming).show();替换为$('#'+naming).show();。

.show()是一个jQuery函数，你试图在DOM节点上使用它。

<强> jsFiddle example

Answer 2

尝试此操作，将document.getElementById(naming).show();替换为document.getElementById("naming").style.display = "none";

显示/隐藏H4不起作用

2 个答案: