JQuery idTabs — проблемы с хешем

У меня есть простая html-страница с 3 вкладками:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>idTabs</title>
<script type="text/javascript" src="http://www.sunsean.com/idTabs/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js"></script>
</head><body style="background-color:White; color:Black">

    <style type="text/css">
        /* Jquery Tabbed Panels */
        div.idTabs
        {
        float:left;
        margin-top:30px;
        }

        .idTabs a
        {
            display: block;
            padding: 10px;
            color: #333;
            background: #DDF1FF;
            font: 11px Verdana, Geneva, sans-serif;
            text-decoration: none;
            border: none;
        }

        .idTabs a.selected
        {
            background: #FFF;
            color: #333;
            border-bottom: solid 1px #FFF;
            z-index: 120;
        }

    </style>
    <div class="vi_wrapper">

        <div class="idTabs">
            <ul style=" padding: 0px; position: relative; z-index: 100;">
                <li style="display: block; list-style: none; float: left; background: #CCC; padding: 1px 1px 0px 1px; margin-right:4px;">
                    <a class="selected" href="#Tab1" name="Tab1">Tab1</a>
                </li>
                <li style="display: block; list-style: none; float: left; background: #CCC; padding: 1px 1px 0px 1px; margin-right:4px;">
                    <a href="#Tab2" name="Tab2">Tab2</a>
                </li>
                <li style="display: block; list-style: none; float: left; background: #CCC; padding: 1px 1px 0px 1px; margin-right:4px;">
                    <a href="#Tab3" name="Tab3">Tab3</a>
                </li>
            </ul>
            <div class="items">
                <div id="Tab1">
                    <div style="float:left">
                        Tab1
                        <br />
                        here is hash, and when you click on it - no tab:
                        <br />
                        <a href="#SomeHashTab1">Some Hash 1</a>                        
                   </div>
                </div>

                <div id="Tab2">
                    <div style="float:left">
                        Tab2
                        <br />

                        here is hash, and when you click on it - no tab:
                        <br />
                        <a href="#SomeHashTab2">Some Hash 2</a>

                    </div>
                </div>

                <div id="Tab3">
                    <div style="float:left">
                        Tab3
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(".idTabs").idTabs(true, location.hash);
        </script>
    </div>
</body></html>

Итак, каждая вкладка открывается по хэшу в ссылке (#Tab1, #Tab2, #Tab3), но если я добавляю другую ссылку с хешем в содержимое вкладки, она открывает мне пустую вкладку.

Как я могу пропустить клики по всем хэшам, которые не являются хэшем табуляции? Большое спасибо!


javascript jquery jquery-ui-tabs jquery-tabs
person ihorko    schedule 21.02.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Просто переместите items DIV за пределы idTabs DIV. Похоже, плагин привязывает эффект вкладок ко всем ссылкам, содержащим хэши.

ИЗМЕНИТЬ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>idTabs</title>
<script type="text/javascript" src="http://www.sunsean.com/idTabs/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js"></script>
</head><body style="background-color:White; color:Black">

    <style type="text/css">
        /* Jquery Tabbed Panels */
        div.idTabs
        {
        float:left;
        margin-top:30px;
        }

        .idTabs a
        {
            display: block;
            padding: 10px;
            color: #333;
            background: #DDF1FF;
            font: 11px Verdana, Geneva, sans-serif;
            text-decoration: none;
            border: none;
        }

        .idTabs a.selected
        {
            background: #FFF;
            color: #333;
            border-bottom: solid 1px #FFF;
            z-index: 120;
        }

        .items {
            clear: both;
        }
    </style>
    <div class="vi_wrapper">
        <div class="tabs-cont">
        <div class="idTabs">
            <ul style=" padding: 0px; position: relative; z-index: 100;">
                <li style="display: block; list-style: none; float: left; background: #CCC; padding: 1px 1px 0px 1px; margin-right:4px;">
                    <a class="selected" href="#Tab1" name="Tab1">Tab1</a>
                </li>
                <li style="display: block; list-style: none; float: left; background: #CCC; padding: 1px 1px 0px 1px; margin-right:4px;">
                    <a href="#Tab2" name="Tab2">Tab2</a>
                </li>
                <li style="display: block; list-style: none; float: left; background: #CCC; padding: 1px 1px 0px 1px; margin-right:4px;">
                    <a href="#Tab3" name="Tab3">Tab3</a>
                </li>
            </ul>

        </div>
        <div class="items">
                <div id="Tab1">
                    <div style="float:left">
                        Tab1
                        <br />
                        here is hash, and when you click on it - no tab:
                        <br />
                        <a href="#SomeHashTab1">Some Hash 1</a>                        
                   </div>
                </div>

                <div id="Tab2">
                    <div style="float:left">
                        Tab2
                        <br />

                        here is hash, and when you click on it - no tab:
                        <br />
                        <a href="#SomeHashTab2">Some Hash 2</a>

                    </div>
                </div>

                <div id="Tab3">
                    <div style="float:left">
                        Tab3
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(".idTabs").idTabs(true, location.hash);
        </script>
    </div>
</body></html>
person ifaour    schedule 21.02.2011
comment
Спасибо. Но я полностью удалил его (элементы div), но это не решает проблему, проблема все еще существует. - person ihorko; 21.02.2011
comment
@ihorko: я имел в виду переместить его со всем содержимым! - person ifaour; 21.02.2011
comment
Если я перееду, у меня не будет вкладок. Или я чего-то не понимаю, пожалуйста, напишите сюда код. Спасибо - person ihorko; 21.02.2011

arrow_upward
0
arrow_downward 

if($(location.hash).length) {
   $(".idTabs").idTabs(true, location.hash);
}

EDIT: Не '#'+location.hash, потому что location.hash уже включает '#'.

person delphist    schedule 21.02.2011
comment
У меня это не работает, та же проблема, когда вы нажимаете Some Hash 1, он очищает все вкладки и ничего не показывает (без вкладки) - person ihorko; 21.02.2011
comment
хм, это возможно, если блок с id somehash1 существует - person delphist; 21.02.2011
comment
нет, просто создайте файл 1.html на диске, скопируйте мой код выше в этот файл и откройте его в браузере, вы увидите - person ihorko; 21.02.2011