jquery, bug with my http path
i have the following code. I'm not sure where in the code but my hyperlinks aren't working anymore. it just keeps appending to my current url with #. Please forgive me as I am still new to jquery.
thanks
<script type="text/javascript">
// $(function(){
// // Tabs
// $('#tabs').tabs();
// });
if ($.browser.msie) {
alert('Website will not be supported in IE, Please use FireFox ');
window.location.replace('nosupportforie.html');
}
// 7 15 2011 EXPERIMENT:
var tabs,
tabulation = false,
initialTab = 'Instructions',
navSelector = '#tabs .ui-tabs-nav',
navFilter = function(el) {
return $(el).attr('href').replace(/^#/, '');
},
panelSelector = '#tabs .ui-tabs-panel',
panelFilter = function() {
$(panelSelector + ' a').filter(function() {
return $(navSelector + ' a[title=' + $(this).attr('title') + ']').size() != 0;
}).each(function(event) {
$(this).attr('href', '#' + $(this).attr('title').replace(/ /g, '_'));
});
};
if ($.address.value() == '') {
$.address.value(initialTab);
}
// Address handler
$.address.history(false).strict(false).wrap(true).init(function(event) {
// Adds the ID in a lazy manner to prevent scrolling
$(panelSelector).attr('id', initialTab);
// Enables the plugin for all the content links
$(panelSelector + ' a').address(function() {
return navFilter(this);
});
panelFilter();
// Tabs setup
tabs = $('#tabs')
.tabs({
load: function(event, ui) {
// Filters the content and applies the plugin if needed
$(ui.panel).html($(panelSelector, ui.panel).html());
panelFilter();
},
})
.css('display', 'block');
// Enables the plugin for all the tabs
$(navSelector + ' a').click(function(event) {
tabulation = true;
$.address.value(navFilter(event.target));
tabulation = false;
return false;
});
}).change(function(event) {
var current = $('a[href=#' + event.value + ']:first');
// Sets the page title
$.address.title($.address.title().split(' | ')[0] + ' | ' + current.text());
// Selects the proper tab
if (!tabulation) {
tabs.tabs('select', current.attr('href'));
}
}).externalChange(function(event) {
// Select the proper tab
tabs.tabs('select', $(currentSelector(event.value)).attr('href'));
}).history(true);
....
<div id="tabs">
<ul>
<li><a href="#Instructions" title="Instructions" >Instructions</a></li>
<li><a href="#Documentations" >Documents</a></li>
<li><a href="#DataExtraction" >Data Extraction</a></li>
<li><a href="#FAQ">FAQ</a></li>
开发者_StackOverflow社区 <li><a href="#UserInfo" >User Info</a></li>
</ul>
...
<script>
$.get("cgi_scripts/main_userinfo.cgi",function(data){$("#UserInfo").html(data)});
$.get("cgi_scripts/main_faqpage.cgi",function(data1){$("#FAQ").html(data1)});
$.get("cgi_scripts/main_intro_page.cgi",function(data2){$("#Instructions").html(data2)});
$.get("cgi_scripts/main_documentation.cgi",function(data2){$("#Documentations").html(data2)});
Your problem is not in the jQuery, but in the href
of your links. You are using hashes, which are appended to the current URL when clicked.
<li><a href="#Instructions" title="Instructions" >Instructions</a></li>
<li><a href="#Documentations" >Documents</a></li>
<li><a href="#DataExtraction" >Data Extraction</a></li>
<li><a href="#FAQ">FAQ</a></li>
<li><a href="#UserInfo" >User Info</a></li>
If you have separate pages with those names, you may need to use something like:
<li><a href="/Instructions.html" title="Instructions" >Instructions</a></li>
If you want the user to be redirected to a certain part of the current page when the links are clicked, make sure you have appropriate tags marking the target portions of the page. Example:
<a name="Instructions" />
Okay, I debug the issue to my change statement:
tabs.tabs('select', $(currentSelector(event.value)).attr('href'));
精彩评论