Question

大家好

我正在制作一个Web应用程序，使用AngularJS和MaterializeCSS作为前端，一切正常，直到我使用名为Tabs的Materialize组件。当我在寻找错误时，我意识到错误是标签中的锚链接。 Angular将href =“＃link”标识为路径，但Materialize用于id选择器。我不知道该怎么做，我会感激任何帮助

    <!-- Begin Tabs-->
<div class="section white">
    <div class="container tab-container z-depth-5">
        <div class="row">
        <div class="col s12">
            <div class="center tab-header white-text">
                <h1>Pro Players</h1>
            </div>
          <ul class="tabs">
            <li class="tab col s3"><a class="active" href="#top">Top Mundial</a></li>
            <li class="tab col s3"><a href="#NA">Norte América</a></li>
            <li class="tab col s3"><a href="#LATAM">Latino América</a></li>
          </ul>
        </div>
        <div id="top" class="col s12 tab-div">
            <h1 class="">Mejores jugadores del mundo..</h1>
            <h2>Norte América</h2>
        </div>
        <div id="NA" class="col s12 tab-div">
            <h1 class="">Mejores jugadores de NA..</h1>
            <h2>Norte América</h2>
        </div>
        <div id="LATAM" class="col s12 tab-div">
            <h1 class="">Mejores jugadores latinos..</h1>
            <h2>Latino América</h2>
        </div>
        </div>
    </div>
</div>
<!-- End Tabs-->

Answer 1

您可以使用<?php $db_name="a7614252_booked"; $mysql_user="a7614252_booked"; $mysql_pass="booked"; $server_name="server38.000webhost.com"; //t_string error here. $con=mysqli_connect($server_name,$mysql_user,$mysql_pass,$db_name)or die(‘Connection Error’.mysqli_connect_error()); ?>

解决此问题

ng-show

JS

<ul class="tabs">
    <li class="tab col s3" ng-click="currentTab = 'Top'"><a ng-class="{'active':currentTab == 'Top'}"  >Top Mundial</a></li>
    <li class="tab col s3" ng-click="currentTab = 'NA'"><a ng-class="{'active':currentTab == 'NA'}">Norte América</a></li>
    <li class="tab col s3" ng-click="currentTab = 'LATAM'"><a ng-class="{'active':currentTab == 'LATAM'}">Latino América</a></li>
</ul>

<div ng-show="currentTab == 'top'" class="col s12 tab-div">
    <h1 class="">Mejores jugadores del mundo..</h1>
    <h2>Norte América</h2>
</div>
<div ng-show="currentTab =='NA'" class="col s12 tab-div">
    <h1 class="">Mejores jugadores de NA..</h1>
    <h2>Norte América</h2>
</div>
<div ng-show="currentTab == 'LATAM'" class="col s12 tab-div">
    <h1 class="">Mejores jugadores latinos..</h1>
    <h2>Latino América</h2>
</div>

或

您可以使用$scope.currentTab = 'TOP';代替data-target

href

Answer 2

您可以尝试在列表标记中添加ng-click，而不是添加锚标记，并且可以在ng-click上更改路径或者类似 location.hash =“LATAM”。

Answer 3

我知道这是旧的，但我刚刚通过调试materialize的tabs.js插件解决了这个问题。现在我可以使用ng-click切换标签，动画可以顺利运行。这是你如何做到的：

下载此文件 https://cdn.rawgit.com/Dogfalo/materialize/master/dist/js/materialize.js
转到插件的tabs.js部分（第1301-1464行）。用jsbin javascript文件替换它： https://jsbin.com/nokepaqage/1/edit?html,js,output
设置路线。
在根控制器中，设置原型$scope.page = {}。
在您的子控件中，对于每个页面，请写下$scope.page.id = 'your-title'};
在每个.tabs li a中使用ng-class，如：ng-class="{active: page.id==='yourPage'}"。
在每个.tabs li a中，设置ng-click ng-click="go('/news')
在根控制器中，传入$location（请参阅我的jsbin）并创建go函数（请参阅jsbin）。

这对我有用！如果您有任何疑问/问题，请告诉我们！

使用Angular Js实现Tabs Anchor链接

3 个答案: