Home > Web Front-end > HTML Tutorial > How to implement html background navigation iframe click to change url (code)

How to implement html background navigation iframe click to change url (code)

不言
Release: 2018-08-30 11:22:27
Original
2596 people have browsed it

The content of this article is about how to implement html background navigation iframe click to change url (code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I wrote a small project, and I found a background template on the Internet, but I didn’t want to load the head and footer repeatedly...

I thought of using an iframe, and I’ll write whatever I want. Everyone is welcome. Advice

id="nav_menu" is added to the ul of the secondary menu...

<script type="text/javascript">
    //导航
    $(&#39;#nav_menu a&#39;).click(function(){
        //选中样式
        $(".am-fr").removeClass(&#39;am-icon-star&#39;);
        $(this).children(&#39;.am-fr&#39;).addClass(&#39;am-icon-star&#39;);
        //url
        href = $(this).attr(&#39;href&#39;);
        $(&#39;#iframe&#39;).attr(&#39;src&#39;,href);
        return false;
    });

    //iframe是否加载完,并且隐藏滚动条
    var iframe = document.getElementById("iframe");
    if (iframe.attachEvent){
      iframe.attachEvent("onload", function(){
        hideS();
      });
    } else {
      iframe.onload = function(){
        hideS();
      };
    }

    function hideS()
    {
      document.getElementById("iframe").scrolling="no";
      document.getElementById("iframe").style.overflow="hidden";
    }
</script>
Copy after login

Related recommendations:

How to make it Iframe nested frameset frame, click the hyperlink in the navigation bar, the browser url changes? ? _html/css_WEB-ITnose

Bootstrap, navigation bar click effect repair (repair) _html/css_WEB-ITnose

The above is the detailed content of How to implement html background navigation iframe click to change url (code). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template