Javascript JQuery idTabs-哈希问题_Javascript_Jquery_Jquery Ui Tabs_Jquery Tabs

Javascript JQuery idTabs-哈希问题

javascript jquery

Javascript JQuery idTabs-哈希问题,javascript,jquery,jquery-ui-tabs,jquery-tabs,Javascript,Jquery,Jquery Ui Tabs,Jquery Tabs,我有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&

我有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>


idTabs
/*Jquery选项卡式面板*/
div.idTabs
{
浮动：左；
边缘顶部：30px；
}
.IDA
{
显示：块；
填充：10px；
颜色：#333；
背景:#DDF1FF；
字体：11px Verdana，日内瓦，无衬线；
文字装饰：无；
边界：无；
}
.IDA.已选定
{
背景：#FFF；
颜色：#333；
边框底部：实心1px#FFF；
z指数：120；
}
填充：0px；位置：相对；z索引：100；“>







表1


这是散列，当您单击它时-无选项卡：


表2


这是散列，当您单击它时-无选项卡：


表3
$（“.idTabs”）.idTabs（true，location.hash）；

因此，每个选项卡都是通过链接中的散列打开的（#Tab1、#Tab2、#Tab3），但是如果我在选项卡内容中添加其他一些带有散列的链接，它会打开一个空选项卡

如何跳过对所有不属于tab哈希的哈希的单击？非常感谢

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

编辑：不是

“#”+location.hash

，因为

location.hash

已经包含了一个

“#”

只需将

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


idTabs
/*Jquery选项卡式面板*/
div.idTabs
{
浮动：左；
边缘顶部：30px；
}
.IDA
{
显示：块；
填充：10px；
颜色：#333；
背景:#DDF1FF；
字体：11px Verdana，日内瓦，无衬线；
文字装饰：无；
边界：无；
}
.IDA.已选定
{
背景：#FFF；
颜色：#333；
边框底部：实心1px#FFF；
z指数：120；
}
.项目{
明确：两者皆有；
}
填充：0px；位置：相对；z索引：100；“>







表1


这是散列，当您单击它时-无选项卡：


表2


这是散列，当您单击它时-无选项卡：


表3
$（“.idTabs”）.idTabs（true，location.hash）；
somehash1对我不起作用，同样的问题，当你点击“somehash1”时，它会清除所有的选项卡，并且不显示任何内容（无选项卡）。嗯，如果id为somehash1
的块存在，这是可能的。不，它不会，只需在光盘上创建1.html文件，将上面的代码复制到该文件中，然后在浏览器中打开它，你就会看到谢谢。但我完全删除了它（“items”div），但它并没有解决它，问题仍然存在exists@ihorko当前位置我的意思是移动它及其所有内容！如果我移动，我将没有标签。或者我不明白，请在这里发布代码。谢谢