Question

我正在使用bootstrap开发一个php站点。内容有两种语言，因此我使用bootstrap为文章制作了标签式导航。现在我添加了一个工具按钮，供用户增加/减少每个活动选项卡的文本字体大小。但我在这里面临一个问题。它仅适用于第一个选项卡。它如何适用于每个标签内容。请帮忙。希望你能得到我。以下是我正在处理的代码。感谢。

链接：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

您可以将click事件委托给2个不同的按钮'+'，' - '，并通过递增或递减定义为变量的因子来替换现有的font-size css属性。

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

工作示例：http://jsfiddle.net/3kgbG/1155/

Answer 2

在您的javascript中，您正在寻找第一次出现的id＆＃34;文字＆＃34;。您应该更改它以查找所有出现的类。类似的东西：

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';
    }
}

确保在html中添加该课程。

修改

HTML更改：

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

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

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

2 个答案: