jquery tabify url id

Question

我正在使用带有jQuery的tabify插件，但当我在href中的#id之前使用url时，我正试图让它工作。

原始演示使用url我所有改变的是id和类。

根本无法解决这个问题。

    <ul id="tab-box" class="tab-menu">
                <li class="active text-shadow"><a href="dfdf/dfdf.html#overview">Overview</a></li>
                <li ><a href="dfdf/dfdfdf.html#reviews">Reviews</a></li>
        </ul>
        <div id="overview" class="tab-content">
            <p>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.</p>
<p>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.</p>
        </div>
        <div id="reviews" class="tab-content">
            <p>

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



.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;
}




<script>
$('#tab-box').tabify();
</script>

Answer 1

您网址中的反斜杠正在打破它。

没有真正的理由在标签中包含实际的网址，因为标签的重点是为用户提供当前页面上的新内容。