Переписать JQuery скрипт в чистом JavaScript - PullRequest
Новая
       21

Переписать JQuery скрипт в чистом JavaScript

0 голосов
/ 24 января 2012

У меня есть страница, содержащая вкладки, активированные jquery. Мне нужно иметь возможность ссылаться на конкретные вкладки с других страниц через якоря. У меня есть скрипт jquery, чтобы включить это (он находит хэши вкладок), но он работает только в Firefox (IE и safari просто загружают страницу без идентификатора хеша в адресной строке). Из исследований я думаю, что это может быть потому, что IE и Safari нужны window.location.hash, а не location.hash в jquery.

Поэтому я попытался переписать скрипт jquery на чистом javascript (с помощью кода, найденного в stackoverflow), но, к сожалению, он не работает (мои знания чистого javascript довольно ограничены). Так что я был бы очень благодарен за помощь!

HTML для вкладок: 

<ul class="tabs">
<li class="active"><a id="one" href="#tab1" name="one">Government</a></li>
<li><a id="two" href="#tab2" name="two">Sponsoring</a></li>
<li><a id="three" href="#tab3" name="three">Events</a></li>
<li><a id="four" href="#tab4" name="four">Donations</a></li>
</ul>
<div class="tab-container">
<div class="tab-content" id="tab1" style="display:block"></div>
<div class="tab-content" id="tab2"></div>
<div class="tab-content" id="tab3"></div>
<div class="tab-content" id="tab4"></div>
</div>

Jquery для активации вкладок: 

$(".tab-content").hide(); 
$("ul.tabs li:first").addClass("active").show(); 
$(".tab-content:first").show(); 

$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); 
$(this).addClass("active"); 
$(".tab-content").hide();
var activeTab = $(this).find("a").attr("href"); 
if ($.browser.msie)
{$(activeTab).show();} 
else
{$(activeTab).fadeIn(0); 
}
return false;
});

Якорная ссылка: 

 <a href="/charity-funding/#tab4">Donations</a>

Сценарий Jquery для получения хэша вкладки и, следовательно, для включения ссылки на определенную вкладку через привязку на другой странице (которая работает только в Firefox): 

var openTab = $(location.hash).filter(".tab-content");
if(openTab.length){
$("a[href='"+location.hash+"']").click(); 
  window.scroll(0,327);              
}

Моя попытка переписать вышеуказанный скрипт в чистый javascript - который не работает! 

//javascript function to find the class tab-content
function hasClass(el, cssClass) {
return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}

var matchingElements = [];
var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length, el; i < len; ++i) {
el = allElements[i];   
if (hasClass(el, "tab-content")) { 
//  now the jquery script in pure javascript
  var openTab = window.location.hash;
  if (openTab.length) { (this.window.location.href + "#").click(); 
window.scroll(0,327);
                }
// finish                  
  matchingElements.push(el);
}
}
...