Question

好的，我有三个计算它们（3）我想用Javascript或Jquery使用bootstrap切换的东西。

Fiddle not working我可以告诉我为什么我要让它在本地和网上工作。

JavaScript does work here in this example

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

所以现在这样做是切换DIV的可见性，以＆＃34; show（i）＆＃34;开头。从任何按钮或链接开始＆＃34; cont（i）＆＃34;

我想要切换以下3件事：

切换内容
更改＆＃34;更多＆＃34;按钮的标签或文字。到＆＃34;少＆＃34;
分配不同的引导按钮主题（默认，主要，无论如何）

开始任何帮助非常感谢。 TIA。

Answer 1

我希望你不要使用jquery，因为我使用它制作了一个样本，take a look

您需要注意的主要内容是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元素的任何属性;

我希望这能帮到你！

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

1 个答案: