Question

我想在我的网站上建立两个或更多标签页。

我已经使用此标签创建了一个html页面和javascript页面。

这是我的代码：在标题中：

<script type="text/javascript">
        $(document).ready(function(){
          $('#tabslinks').smartTab();
          $('#tabsrechts').smartTab();
        });
    </script>

和html

<div id="tabslinks" class="stContainer">
        <ul>
            <li>
                <a href="#tabslinks-1">
                    <h2>Tab 1<br />
                    <small>Description</small></h2>
                </a>
            </li>
            <li>
                <a href="#tabslinks-2">
                    <h2>Tab 2<br />
                    <small>Description</small></h2>
                </a>
            </li>
            <li>
                <a href="#tabslinks-3"> 
                    <h2>Tab 3<br />
                    <small>Description</small></h2>
                </a>
            </li>
            <li>
                <a href="#tabslinks-4">
                    <h2>Tab 4<br />
                    <small>Description</small></h2>
                </a>
            </li>
        </ul>

        <div id="tabslinks-1">
            <h2>Tab 1 Title</h2>    
            <p>Tab 1 Content here</p>           
        </div>
        <div id="tabslinks-2">
            <h2>Tab 2 Title</h2>    
            <p>Tab 2 Content here</p>     
        </div>                      
        <div id="tabslinks-3">
            <h2>Tab 3 Title</h2>    
            <p>Tab 3 Content here</p>                                 
        </div>
        <div id="tabslinks-4">
            <h2>Tab 4 Title</h2>    
            <p>Tab 4 Content here</p>
        </div>
    </div>


    <div id="tabsrechts" class="stContainer">
        <ul>
            <li>
                <a href="#tabsrechts-1">
                    <h2>Tab 1<br />
                    <small>Description</small></h2>
                </a>
            </li>
            <li>
                <a href="#tabsrechts-2">
                    <h2>Tab 2<br />
                    <small>Description</small></h2>
                </a>
            </li>
            <li>
                <a href="#tabsrechts-3">    
                    <h2>Tab 3<br />
                    <small>Description</small></h2>
                </a>
            </li>
            <li>
                <a href="#tabsrechts-4">
                    <h2>Tab 4<br />
                    <small>Description</small></h2>
                </a>
            </li>
        </ul>

        <div id="tabsrechts-1">
            <h2>Tab 1 Title</h2>    
            <p>Tab 1 Content here</p>           
        </div>
        <div id="tabsrechts-2">
            <h2>Tab 2 Title</h2>    
            <p>Tab 2 Content here</p>     
        </div>                      
        <div id="tabsrechts-3">
            <h2>Tab 3 Title</h2>    
            <p>Tab 3 Content here</p>                                 
        </div>
        <div id="tabsrechts-4">
            <h2>Tab 4 Title</h2>    
            <p>Tab 4 Content here</p>
        </div>
    </div>

我使用名为smart tab的jquery选项卡。当你谷歌智能选项卡。你可以看到我使用的插件。

但是没有你看到问题。当我在页面上制作多个标签时。选项卡不起作用。只有一个选项卡正在运行，第一个选项卡不起作用。我可以在1页上制作多个标签吗？

由于

Answer 1

您没有正确地将ID分配给jQuery。你的jQuery代码看起来应该是这样的：

$(document).ready(function(){
  $('a[id^="tabslinks"]').smartTab();
});

^表示选择器的开头用于定位所有ID为tabslinks的链接，因为您有这样的链接ID：

        <a href="#tabslinks-1">
                <h2>Tab 1<br />

                <small>Description</small></h2>
            </a>
        </li>
        <li>
            <a href="#tabslinks-2">
                <h2>Tab 2<br />
                <small>Description</small></h2>

            </a>
        </li>
        <li>
            <a href="#tabslinks-3"> 
                <h2>Tab 3<br />
                <small>Description</small></h2>
            </a>
            .............

或者，您可以使用class来定位要拼写的链接。

$(document).ready(function(){
  $('a.someClass').smartTab();
});

jquery选项卡问题

1 个答案: