利用iframe做通用导航栏点击切换选择当前按钮颜色

页面引入通用iframe

<iframe class="head" id="head" src="head.html" frameborder="0" scrolling="no" ></iframe>

head.html

<style>
    .active{
        color: darkred;
        font-size: 15px;
    }
    .active_1{
        color: black;
        font-size: 15px;
    }
</style>

<div class="nav" id="nav">
    <ul>
        <li><a class="active_1" href="index.html" target="_blank">首页</a></li>
        <li><a class="active_1" href="message.html" target="_blank">最新资讯</a></li>
        <li><a class="active_1" href="#" target="_blank">流程</a></li>
        <li><a class="active_1" href="elegant.html" target="_blank">风采</a></li>
        <li><a class="active_1" href="#" target="_blank">学习</a></li>

        <li><a class="active_1" href="#" target="_blank">首页</a></li>
        <li><a class="active_1" href="#" target="_blank">最新资讯</a></li>
        <li><a class="active_1" href="#" target="_blank">流程</a></li>
        <li><a class="active_1" href="#" target="_blank">风采</a></li>
        <li><a class="active_1" href="#" target="_blank">学习</a></li>
    </ul>
</div>
			
			
<script type="text/javascript">
    $(document).ready(function(){
        $(".nav li a").each(function () {
            //parent.window.location 获取父级地址
            if ($(this)[0].href == String(parent.window.location)) {
                    $(this).addClass("active").siblings().removeClass("active");
                    return false;
                }
            });
        });
</script>