Question

我有这个让java脚本在页面加载时激活一个bootstrap选项卡，当url看起来像这样：/settings#update。

<script type="text/javascript">
   $(function () {
     var url = document.location.toString();
     var url2 = url.split('#')[1];

     var script = '#myTab a[href="#'+url2+'"]';

     $(script).tab('show');

    })
</script>

我的HTML就是这样：

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#general" data-toggle="tab" class="btn btn-primary"><?php echo __('settings:general') ?></a></li>
    <li><a href="#identities" data-toggle="tab" class="btn btn-primary"><?php echo __("settings:business_identities") ?></a></li>
    <li><a href="#update" data-toggle="tab" class="btn btn-primary"><?php echo __('global:update') ?></a></li>
  </ul>
 <div class="tab-content">
    ... 
 </div>

如果全部运行，我会在此行中收到此错误：$(script).tab('show');

Uncaught TypeError: undefined is not a function

这是什么意思？

Answer 1

如果网址中没有#，则script变量未定义。您需要检查此案例。

<script type="text/javascript">
   $(function () {
     var url = document.location.toString();
     if(url.match('#')!=null){
        var url2 = url.split('#')[1];
        var script = '#myTab a[href="#'+url2+'"]';
        $(script).tab('show');
     }

   })
</script>

Answer 2

确保您的所有其他HTML内容都低于其他内容。在尝试使用脚本操作DOM之前，请确保已正确加载DOM。您还可以将函数包装在$（document）.ready（）中以确保加载DOM。正如之前在评论中提到的，代码工作正常。

JSFIDDLE

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#general" data-toggle="tab" class="btn btn-primary">a0</a></li>
    <li><a href="#identities" data-toggle="tab" class="btn btn-primary">a1</a></li>
    <li><a href="#update" data-toggle="tab" class="btn btn-primary">a2</a></li>
  </ul>
 <div class="tab-content">
    ... 
 </div>
<script>
    $(document).ready(function({
    var url = "costam#active"
     var url2 = url.split('#')[1];

     var script = '#myTab a[href="#'+url2+'"]';

     $(script).tab('show');
    }));
</script>

使用URL激活Bootstrap选项卡

2 个答案: