增加选项卡式导航中文本的字体大小

Question

I'm developing a php site with bootstrap. The content is in two languages so i made a tabbed navigation for articles using bootstrap. Now i added a tool button for users to increase/decrease font size of the text for every active tab. But i'm facing a problem here. It is only working for the first tab. How it works for every tab content. Please help. Hope you got me. Below is the code I'm working on. Thanks.

Link: tabbed navigation example

[Increase button A+]    [Decrease button A-]

+-----------------+--------+--------+
|  Lang 1(active) | Lang 2 | Lang 3 |
+-----------------+--------+--------+
|                                   |
|                                   |
|    lang 1   text   here           |
|                                   |
|                                   |
+-----------------------------------+


<p>
<a class='btn btn-mini' href=\"javascript:void(0);\" onclick=\"changeFontSize('text','2');\">Increase font</a>
<a class='btn btn-mini' href=\"javascript:void(0);\" onclick=\"changeFontSize('text',-2);\">Decrease font</a>
</p>

    <ul id='myTab' class='nav nav-tabs nav-justified'>
    if($row["lang1"] != '')
        {
                echo"<li class='active'><a href='#lang1' data-toggle='tab'>lang1</a>
                </li>"; }

                if($row["lang2"] != '')
        {
                echo"<li class=''><a href='#lang2' data-toggle='tab'>lang2</a>
                </li>"; }

        if($row["lang3"] != '')
        {
           <li class='active'><a href='#lang3' data-toggle='tab'>lang3</a>
            }
            </li>

            </ul>

            <div id='myTabContent' class='tab-content'>


<div class='tab-pane fade active in' id='text' style='font-size:16px !important;' class='lang1'>
.......... Lang 1 Content.....
</div>
<div class='class='tab-pane fade'' id='text' style='font-size:16px !important;' class='lang2'>
.......... Lang 2 Content.....
</div>
<div class='class='tab-pane fade'' id='text' style='font-size:16px !important;' class='lang3'>
.......... Lang 3 Content.....
</div>    </div>    

        <script>
        function changeFontSize(element,step)
        {
            step = parseInt(step,10);
            var el = document.getElementById(element);
            var curFont = parseInt(el.style.fontSize,10);
            el.style.fontSize = (curFont+step) + 'px';
            return;
        }
        </script>

Answer 1

You can delegate click event to 2 different buttons '+' , '-' and replace their existing font-size css attribute by incrementing or decrementing by the factor defined as a variable.

<input type="button" id="btnInc" value="+"></input><input type="button" id="btnDec" value="-"></input>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <div id='text' style='font-size:16px !important;' class='lang1'>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <div id='text' style='font-size:16px !important;' class='lang2'>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
     <div id='text' style='font-size:16px !important;' class='lang3'>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

<script>
var fontFactor = 2;

$().ready(function(){
$("#btnInc").on("click",function()
{
    $('.active div[class^=lang]').each(function()
    {
       $(this).css("font-size", (parseInt($(this).css("font-size").replace("px","")) + fontFactor) + "px");
    });   

});

$("#btnDec").on("click",function()
{
    $('.active div[class^=lang]').each(function()
    {
       $(this).css("font-size", (parseInt($(this).css("font-size").replace("px","")) - fontFactor) + "px");
    });   

});
});
</script>

Working example : http://jsfiddle.net/3kgbG/1155/

Answer 2

In your javascript, you are looking for the first occurrence of the id "text". You should change that to look for all occurrences of a class. something like:

function changeFontSize(element,step) {
    step = parseInt(step,10);
    var el = document.getElementsByClassName(element);
    for (var i in el) {
        var curFont = parseInt(el[i].style.fontSize,10);
        el[i].style.fontSize = (curFont+step) + 'px';
    }
}

Make sure you add the class in your html.

EDIT

HTML changes:

<div class='tab-pane fade active in text' style='font-size:16px !important;'>
    .......... Lang 1 Content.....
</div>
<div class='tab-pane fade text' style='font-size:16px !important;'>
    .......... Lang 2 Content.....
</div>
<div class='tab-pane fade text' style='font-size:16px !important;'>
    .......... Lang 2 Content.....
</div>

EDIT 2

<p>
    <a class='btn btn-mini' href=\"javascript:void(0);\" onclick=\"changeFontSize('active text','2');\">Increase font</a>
    <a class='btn btn-mini' href=\"javascript:void(0);\" onclick=\"changeFontSize('active text',-2);\">Decrease font</a>
</p>