JQuery вкладки проблема

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>

И я использовал вкладку jquery с именем smart tab. Когда вы гуглите умную вкладку. Вы можете увидеть плагин, который я использую.

Но нет, вы видите проблему. Когда я делаю более 1 вкладки на странице. Вкладки не работают. Работает только 1 вкладка, а первая вкладка не работает. Могу ли я сделать более одной вкладки на 1 странице?

Спасибо

Answer 1

Вы неправильно присваиваете идентификаторы jQuery. Ваш код jQuery должен выглядеть так, чтобы он работал:

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

Старты с селектором, обозначенным ^, используются для нацеливания на все ссылки с идентификатором, начинающимся с tabslinks, поскольку у вас есть идентификаторы ссылок, подобные этому:

        <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();
});