jquery tabify url id
<p>I am using the tabify plugin with jQuery but am having a nightmare trying to get it to work when I use a url before the #id in the href.</p>

<p>The original demo works with url all I have changed is the ids and classes. </p>

<p>Cant work it out at all.</p>

<pre><code>    &lt;ul id="tab-box" class="tab-menu"&gt;
                &lt;li class="active text-shadow"&gt;&lt;a href="dfdf/dfdf.html#overview"&gt;Overview&lt;/a&gt;&lt;/li&gt;
                &lt;li &gt;&lt;a href="dfdf/dfdfdf.html#reviews"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div id="overview" class="tab-content"&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec luctus eros. Cras nec diam purus,
vitae condimentum erat. Phasellus erat ligula, rutrum eget suscipit quis, pharetra eu enim. In sit amet velit quam,
feugiat elementum quam. Sed nisi libero, pulvinar non imperdiet vel, consequat ut elit. Curabitur et nisi in
libero elementum pretium.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec luctus eros. Cras nec diam purus,
vitae condimentum erat. Phasellus erat ligula, rutrum eget suscipit quis, pharetra eu enim. In sit amet velit quam,
feugiat elementum quam. Sed nisi libero, pulvinar non imperdiet vel, consequat ut elit. Curabitur et nisi in
libero elementum pretium.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="reviews" class="tab-content"&gt;
            &lt;p&gt;

                Let my viciousness be emptied,&lt;br /&gt;
                Desire and lust banished,&lt;br /&gt;
                Charity and patience,&lt;br /&gt;
                Humility and obedience,&lt;br /&gt;
                And all the virtues increased.
            &lt;/p&gt;
        &lt;/div&gt;



.tab-menu { padding:10px 0 5px 0; clear: both; margin-top:10px; overflow:hidden; }

.tab-menu li { display: inline; }

.tab-menu li a {
text-align:center;
padding:10px 15px;
border:2px solid #c4bbc1;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background: #cdc4c8; /* Old browsers */
background: -moz-linear-gradient(top, #cdc4c8 0%, #c6bdc2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdc4c8), color-stop(100%,#c6bdc2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cdc4c8 0%,#c6bdc2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cdc4c8 0%,#c6bdc2 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #cdc4c8 0%,#c6bdc2 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdc4c8', endColorstr='#c6bdc2',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #cdc4c8 0%,#c6bdc2 100%); /* W3C */
text-shadow: 1px 1px 3px #999999;

}

.tab-menu li a:visited, .tab-menu li a:link {
color:white;
}

.tab-menu li.active a {
border:2px solid #9e8f98;
background: #b2a4a9; /* Old browsers */
background: -moz-linear-gradient(top, #b2a4a9 0%, #9f9098 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2a4a9), color-stop(100%,#9f9098)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b2a4a9 0%,#9f9098 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b2a4a9 0%,#9f9098 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #b2a4a9 0%,#9f9098 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2a4a9', endColorstr='#9f9098',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #b2a4a9 0%,#9f9098 100%); /* W3C */
text-shadow: 1px 1px 3px #999999;
}

.tab-content {
float: left;
clear: both;
border: 3px solid #9e8f98;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
width: 732px; }

.tab-content p{
margin-bottom:10px;
}




&lt;script&gt;
$('#tab-box').tabify();
&lt;/script&gt;
</code></pre>
