当前位置： 文江博客话题详情

JQuery idTabs - 哈希问题

发布于 2024-10-18 13:13:59 字数 3494 浏览 6 评论 0原文

我有一个带有 3 个选项卡的简单 html 页面：

<!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），但是如果我将其他带有哈希值的链接添加到选项卡内容中，它会打开一个空选项卡。

如何跳过对非选项卡哈希的所有哈希的点击？ 多谢！

原文

I have simple html page with 3 tabs:

<!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>

So, each tab opens by hash in the link (#Tab1, #Tab2, #Tab3), but if I add some other link with hash into tab content, it opens me an empty tab.

How can I skip the clicks on all hashes that are not of tab hash?
Thanks a lot!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

╭ゆ眷念 2024-10-25 13:13:59

只需将 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>

Just move the items DIV outside the idTabs DIV. It seems that the plugin binds the tabs effect on all the links that contains hashes.

EDIT:

<!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>
回复 原文
小苏打饼 2024-10-25 13:13:59
if($(location.hash).length) {
   $(".idTabs").idTabs(true, location.hash);
}

编辑：不是'#'+location.hash，因为location.hash已经包含'#'。

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

EDIT: Not '#'+location.hash, because location.hash already includes a '#'.

回复 原文
~没有更多了~

关于作者

爱要勇敢去追

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

佚名

文章 0 评论 0

羁客

文章 0 评论 0

天天爱笑的徐老师

文章 0 评论 0

星

文章 0 评论 0

夏日落

文章 0 评论 0

隐诗

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文