Bootstrap切换按钮主题，按钮文本和div

Question

好的，我要统计三（3）件事，我想使用Javascript或使用引导程序的Jquery进行切换。

小提琴无法正常工作有人可以告诉我为什么我可以在本地和在线工作。

在此示例中，JavaScript确实可以在这里工作

使用Javascript

    function toggleLink(obj)
    {
        var idCount = obj.id;
        idCount = idCount.replace( new RegExp('cont', 'g'), '');

        var elem = document.getElementById("show"+idCount);

        var hide = window.getComputedStyle(elem, null).display =="none";
         if (hide) {
             elem.style.display="block";
        } 
        else {
           elem.style.display="none";
        }
    }

简单的CSS

[id^="show"] {
display: none;
 }

HTML

   <button class="btn btn-primary" id="cont1" href="javascript:void(0)" 
   onclick="toggleLink(this)">More </button><P><P>

   <div id="show1">
   CONTENT AREA #1</div><P><P>

   <button class="btn btn-default" id="cont2" href="javascript:void(0)"   
   onclick="toggleLink(this)">More </button><P>

  <div id="show2">
  CONTENT AREA #2<p></div>

因此，现在要做的是从任何按钮或以“ cont（i）”开头的链接切换以“ show（i）”开头的DIV的可见性。

我想要以下3件事情来切换：

1. 切换内容
2. 将按钮的标签或文本从“更多”更改为“减少”
3. 分配不同的引导按钮主题（默认，主要等）

得到了任何帮助，不胜感激。 TIA。

Answer 1

希望您不要因为使用jquery而感到烦恼，因为我使用它做了一个示例， 请看一下

您需要注意的主要部分是toggleLink()函数内部的以下代码：

  if($(obj).text()==='More'){
      $(obj).text("Less");
      $(obj).attr("class","btn btn-primary");
  }else{
      $(obj).text("More");
      $(obj).attr("class","btn btn-default");
  }

我正在使用jquery的两个功能：

• text() ：用于更改html元素内的文本，这不再放置文本；
• attr() ：更改html元素的任何属性；

希望对您有所帮助！