Блог

Главная - Вопросы по программированию - js вкладки по таблице

js вкладки по таблице

#javascript #html-table #tabs

#javascript #html-таблица #вкладки

Вопрос:

У меня есть js и html-код, но это не работает. Как заставить это работать?

 <script src="js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () {
    var tabContainers = $('div.tabs > div');
    tabContainers.hide().filter(':first').show();

    $('div.tabs div.tabs-nav a').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).show();
        $('div.tabs div.tabs-nav a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
});
</script>

<div class="tabs">
    <div class="tabs-nav">
        <table width="100%">
            <tr>
                <td><a href="#" href="#tab-1">link-1</a></td>
                <td><a href="#" href="#tab-2">link-2</a></td>
                <td><a href="#" href="#tab-3">link-3</a></td>
                <td><a href="#" href="#tab-4">link-4</a></td>
                <td><a href="#" href="#tab-5">link-5</a></td>
                <td><a href="#" href="#tab-6">link-6</a></td>
            </tr>
        </table>
    </div>
    <div id="tab-1">
        <p>text text text</p>
    </div>
</div>

Комментарии:

1. Что не работает? Я слишком ленив, чтобы тестировать.

2. Пример взят из vremenno.net/examples/jquery-tabs/multiple.html

3. С ul работает li, но с table td не работает (

4. Я сделал свой, используя только меню навигации и простую <div> структуру. Я почти уверен, что это работает с таблицами, поэтому скопируйте его, если хотите: blender3d.github.com/Bindery

Ответ №1:

Звучит так, как будто вы пытаетесь добавить вкладки на свою страницу. Просто используйте пользовательский интерфейс jQuery и модуль tabs. Вот рабочий пример, просто просмотрите исходный код и скопируйте его:

http://jqueryui.com/demos/tabs/

Вы можете оформить их с помощью тем пользовательского интерфейса jQuery:

http://jqueryui.com/themeroller/

Наслаждайтесь 🙂