devluis/gist:6527564

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
  <style>
    #nav {
      margin:200px auto;
      width:430px;
    }

    #nav ul {
    	list-style:none;
    	background-color:#64abfb;
    }

    #nav ul li {
    	display:inline-block;
    	line-height:44px;
    }

    #nav ul li a {
    	margin:10px;
    	color:#FFF;
    	padding:4px;
    	font-size:20px;
    	text-decoration:none;
    }

    #nav ul li a:hover {
    	border-bottom:3px #FFF solid;
    }

    #nav ul li .active {
    	border-bottom:3px #FFF solid;
    }
  </style>

  <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js”></script>

  <script>
    $(document).ready(function() {
      $(function() {
           var pgurl = window.location.href.substr(window.location.href
      .lastIndexOf("/")+1);
           $("#nav ul li a").each(function(){
                if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
                $(this).addClass("active");
           })
      });
    });
  </script>
</head>

<body>
  <menu id="nav">

    <ul>
        <li><a href="archivo.html">Home</a></li>
        <li><a href="archivo1.html">Contact</a></li>
        <li><a href="archivo3.html">About</a></li>
        <li><a href="archivo4.html">Portfolio</a></li>
    </ul>

  </menu>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#nav {
	margin:200px auto;
	width:430px;
	}

	#nav ul {
	list-style:none;
	background-color:#64abfb;
	}

	#nav ul li {
	display:inline-block;
	line-height:44px;
	}

	#nav ul li a {
	margin:10px;
	color:#FFF;
	padding:4px;
	font-size:20px;
	text-decoration:none;
	}

	#nav ul li a:hover {
	border-bottom:3px #FFF solid;
	}

	#nav ul li .active {
	border-bottom:3px #FFF solid;
	}
	</style>

	<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js”></script>

	<script>
	$(document).ready(function() {
	$(function() {
	var pgurl = window.location.href.substr(window.location.href
	.lastIndexOf("/")+1);
	$("#nav ul li a").each(function(){
	if($(this).attr("href") == pgurl \|\| $(this).attr("href") == '' )
	$(this).addClass("active");
	})
	});
	});
	</script>
	</head>

	<body>
	<menu id="nav">

	<ul>
	<li><a href="archivo.html">Home</a></li>
	<li><a href="archivo1.html">Contact</a></li>
	<li><a href="archivo3.html">About</a></li>
	<li><a href="archivo4.html">Portfolio</a></li>
	</ul>

	</menu>
	</body>
	</html>