2015-08-26 8 views
0

HTML-часть:Открыть IFrame из меню и изменения URL

<div id="menu"> 
    <ul> 
     <li><a class="Offselect" href="aa.html">A</a> 
      <ul> 
       <a id="bb" class="Onselect" href="bb.html">B</a> 
       <a id="cc" class="Offselect" href="cc.html">C</a> 
       <a id="dd" class="Offselect" href="dd.html">D</a> 
      </ul> 

     </li> 
     <li><a id="ee" class="Offselect" href="ee.html">E</a></li> 
    </ul> 
</div> 
<iframe id="iframe"></iframe> 

JQuery часть:

$(function() { 
     var pageurl = window.location.href.substr(window.location.href.lastIndexOf('/')+1); 
     $('#menu a').each(function(){ 
      if($(this).attr('href') == pageurl || $(this).attr('href') == ''){ 
       $(this).addClass('Onselect'); 
      } 
      else{ 
       $(this).addClass('Offselect'); 
      } 
     }); 
    }); 

$(function() { 
    var $content = $('#iframe'); 
    $('#menu a') 
     .click(function() { 
      $content.attr('src', $(this).attr('href')); 
      return false; 
     }); 
}); 

Мой вопрос заключается в изменении URL, когда пункт меню открыт, как обновить адрес URL-адрес для соответствует iframe url? Может ли кто-нибудь помочь? thx!

ответ

0

Сценарий назначения класса выполняется только один раз, когда загружается основная страница, а не когда изменяется iframe.

Таким образом, одним из возможных решений является добавление логики изменения класса в обработчик кликов, так что он удалит класс onSelect из предыдущего элемента и добавит класс onSelect к текущему элементу.

$(function() { 
    var $content = $('#iframe'); 
    $('#menu a') 
     .click(function() { 
     $content.attr('src', $(this).attr('href')); 

     $('#menu a.Onselect').removeClass('Onselect').addClass('Offselect'); 
     $(this).addClass('Onselect').removeClass('Offselect'); 

     return false; 
    }); 
}); 
+0

Thx для вашей помощи проблема класса просто исправлена, но я все еще не могу изменить URL-адрес, который я нажал. –

+0

@ SC.Peng Что вы подразумеваете под 'но я до сих пор не могу изменить URL-адрес, который я нажал' - вы имеете в виду, что iframe не обновляется? –

+0

Я нажал' bb.html' или 'cc.html' ... и т. д., iframe обновлен до bb.html или cc.html, но url по-прежнему выглядит как 'http://example.com/aa.html', он не обновлялся до' http://example.com/bb.html 'или' http: // example.com/cc.html' –

Смежные вопросы