我一直在使用来自codrops Tab Styles Inspiration的标签，我需要能够在网址上打开特定标签。
基本上，如果我想打开tab3，我会链接www.google.com/index#tab3。
这是我的代码：
;( function( window ) {
'use strict';
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
function CBPFWTabs( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}
CBPFWTabs.prototype.options = {
start : 0
};
CBPFWTabs.prototype._init = function() {
// tabs elems
this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
// content items
this.items = [].slice.call( this.el.querySelectorAll( '.content-wrap > section' ) );
// current index
this.current = -1;
// show current content item
this._show();
// init events
this._initEvents();
};
CBPFWTabs.prototype._initEvents = function() {
var self = this;
this.tabs.forEach( function( tab, idx ) {
tab.addEventListener( 'click', function( ev ) {
ev.preventDefault();
self._show( idx );
} );
} );
};
CBPFWTabs.prototype._show = function( idx ) {
if( this.current >= 0 ) {
this.tabs[ this.current ].className = this.items[ this.current ].className = '';
}
// change current
this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
this.tabs[ this.current ].className = 'tab-current';
this.items[ this.current ].className = 'content-current';
};
// add to global namespace
window.CBPFWTabs = CBPFWTabs;
})( window );
这是javascript：
$ ruby -v
ruby 2.3.1p112 (2016-04-26 revision 54768) [x64-mingw32]
$ gem install ruby-debug-ide
Building native extensions. This could take a while...
System cannot find path specified
ERROR: Error installing ruby-debug-ide:
ERROR: Failed to build gem native extension.
current directory: C:/Ruby231-x64/lib/ruby/gems/2.3.0/gems/ruby-debug-ide-0.6.0/ext
C:/Ruby231-x64/bin/ruby.exe mkrf_conf.rb
'Ёбв?┐? -? г¤ ?вбп - cвЁ гЄ § --лc Їгвм.
'Ёбв?┐? -? г¤ ?вбп - cвЁ гЄ § --лc Їгвм.
Installing base gem
Building native extensions. This could take a while...
Building native extensions. This could take a while...
ERROR: Failed to build gem native extension.
current directory: C:/Ruby231-x64/lib/ruby/gems/2.3.0/gems/debase-0.2.2.beta9/ext
C:/Ruby231-x64/bin/ruby.exe -r ./siteconf20170120-10104-1f4a8us.rb extconf.rb
checking for vm_core.h... no
checking for vm_core.h... no
checking for vm_core.h... yes
creating Makefile
To see why this extension failed to compile, please check the mkmf.log which can be found here:
C:/Ruby231-x64/lib/ruby/gems/2.3.0/extensions/x64-mingw32/2.3.0/debase-0.2.2.beta9/mkmf.log
extconf failed, exit code 1
Gem files will remain installed in C:/Ruby231-x64/lib/ruby/gems/2.3.0/gems/debase-0.2.2.beta9 for inspection.
Results logged to C:/Ruby231-x64/lib/ruby/gems/2.3.0/extensions/x64-mingw32/2.3.0/debase-0.2.2.beta9/gem_make.out
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:92:in `run'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/ext/ext_conf_builder.rb:48:in `block in build'
C:/Ruby231-x64/lib/ruby/2.3.0/tempfile.rb:295:in `open'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/ext/ext_conf_builder.rb:31:in `build'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:164:in `block (2 levels) in build_extension'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:163:in `chdir'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:163:in `block in build_extension'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:162:in `synchronize'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:162:in `build_extension'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:201:in `block in build_extensions'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:198:in `each'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:198:in `build_extensions'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/installer.rb:752:in `build_extensions'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/installer.rb:304:in `install'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/resolver/specification.rb:97:in `install'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/request_set.rb:166:in `block in install'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/request_set.rb:156:in `each'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/request_set.rb:156:in `install'
C:/Ruby231-x64/lib/ruby/site_ruby/2.3.0/rubygems/dependency_installer.rb:405:in `install'
mkrf_conf.rb:35:in `rescue in <main>'
mkrf_conf.rb:28:in `<main>'
rake failed, exit code 1
Gem files will remain installed in C:/Ruby231-x64/lib/ruby/gems/2.3.0/gems/ruby-debug-ide-0.6.0 for inspection.
Results logged to C:/Ruby231-x64/lib/ruby/gems/2.3.0/extensions/x64-mingw32/2.3.0/ruby-debug-ide-0.6.0/gem_make.out
$ gem install debase-ruby_core_source
Successfully installed debase-ruby_core_source-0.9.6
$ gem install debase -- --with-ruby-include=C:\Ruby231-x64\lib\ruby\gems\2.3.0\gems\debase-ruby_core_source-0.9.6\lib\debase\ruby_core_source\ruby-2.3.1-p112
Building native extensions with: '--with-ruby-include=C:\Ruby231-x64\lib\ruby\gems\2.3.0\gems\debase-ruby_core_source-0.9.6\lib\debase\ruby_core_source\ruby-2.3.1-p112ruby -v'
This could take a while...
System cannot find path specified
ERROR: Error installing debase:
ERROR: Failed to build gem native extension.
$ gem install debase --pre
Building native extensions. This could take a while...
System cannot find path specified
ERROR: Error installing debase:
ERROR: Failed to build gem native extension.
$ gem install ruby-debug-ide --pre
Building native extensions. This could take a while...
Системе не удается найти указанный путь.
ERROR: Error installing ruby-debug-ide:
ERROR: Failed to build gem native extension.
current directory: C:/Ruby231-x64_unit/lib/ruby/gems/2.3.0/gems/ruby-debug-ide-0.6.1.beta4/ext
C:/Ruby231-x64_unit/bin/ruby.exe mkrf_conf.rb
'Ёбв?┐? -? г¤ ?вбп - cвЁ гЄ § --лc Їгвм.
'Ёбв?┐? -? г¤ ?вбп - cвЁ гЄ § --лc Їгвм.
Installing base gem
Building native extensions. This could take a while...
Building native extensions. This could take a while...
ERROR: Failed to build gem native extension.
current directory: C:/Ruby231-x64_unit/lib/ruby/gems/2.3.0/gems/debase-0.2.2.beta9/ext
C:/Ruby231-x64_unit/bin/ruby.exe -r ./siteconf20170201-7760-7dws4t.rb extconf.rb
checking for vm_core.h... no
checking for vm_core.h... no
checking for vm_core.h... yes
creating Makefile
To see why this extension failed to compile, please check the mkmf.log which can be found here:
C:/Ruby231-x64_unit/lib/ruby/gems/2.3.0/extensions/x64-mingw32/2.3.0/debase-0.2.2.beta9/mkmf.log
extconf failed, exit code 1
Gem files will remain installed in C:/Ruby231-x64_unit/lib/ruby/gems/2.3.0/gems/debase-0.2.2.beta9 for inspection.
Results logged to C:/Ruby231-x64_unit/lib/ruby/gems/2.3.0/extensions/x64-mingw32/2.3.0/debase-0.2.2.beta9/gem_make.out
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:91:in `run'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/ext/ext_conf_builder.rb:36:in `block in build'
C:/Ruby231-x64_unit/lib/ruby/2.3.0/tempfile.rb:295:in `open'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/ext/ext_conf_builder.rb:19:in `build'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:163:in `block (2 levels) in build_extension'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:162:in `chdir'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:162:in `block in build_extension'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:161:in `synchronize'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:161:in `build_extension'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:200:in `block in build_extensions'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:197:in `each'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/ext/builder.rb:197:in `build_extensions'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/installer.rb:741:in `build_extensions'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/installer.rb:290:in `install'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/request_set.rb:166:in `block in install'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/request_set.rb:150:in `each'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/request_set.rb:150:in `install'
C:/Ruby231-x64_unit/lib/ruby/site_ruby/2.3.0/rubygems/dependency_installer.rb:404:in `install'
mkrf_conf.rb:35:in `rescue in <main>'
mkrf_conf.rb:28:in `<main>'
rake failed, exit code 1
Gem files will remain installed in C:/Ruby231-x64_unit/lib/ruby/gems/2.3.0/gems/ruby-debug-ide-0.6.1.beta4 for inspection.
Results logged to C:/Ruby231-x64_unit/lib/ruby/gems/2.3.0/extensions/x64-mingw32/2.3.0/ruby-debug-ide-0.6.1.beta4/gem_make.out
对不起，我不是一个jquery家伙，并且一直试图找到一个解决方案并且只是想问这个问题。在此先感谢您的帮助。
答案 0 :(得分：0)
也许只是听window.hashchange事件做伎俩，nav > li > a上没有点击处理程序！ jQuery方式：
$(function(){
$(window).on('hashchange', function(e) {
var hash = window.location.hash;
// first reset classes
$('nav li').removeClass('tab-current');
$('.content-wrap section').removeClass('content-current');
$('nav li a[href="' + hash + '"]').parents('li').addClass('tab-current');
$('section[id="' + hash.replace('#', '') + '"]').addClass('content-current');
});
});