<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>心食谱导航菜单</title>
<link type="text/css" rel="stylesheet" href="css/common.css" />
<link type="text/css" rel="stylesheet" href="css/navigation.css" />
<script src="js/jquery.js"></script>
</head>
<body>
<div class="nav">
<div class="nav-top wrap"> <img src="image/logo.png" />
<form method="post" action="">
<div class="nav-top-search">
<input type="text" id="search" value="请输入关键字" />
<button type="submit">搜索</button>
</div>
</form>
<div class="nav-top-link"> <a href="#"><i class="fa fa-upload"></i>上传</a><a href="#"><i
class="fa fa-question"></i>提问</a><a href="#"><i class="fa fa-sign-in"></i>登录</a><a href="#"><i
class="fa fa-registered"></i>注册</a> </div>
</div>
<div class="nav-menu">
<ul class="wrap">
<li><a href="index.html" target="_top" class="selected">首页</a></li>
<li><a href="#">菜谱大全</a></li>
<li><a href="#">家常菜谱</a></li>
<li><a href="#">美食问答</a></li>
<li><a href="#">食谱分类</a></li>
<li><a href="#">健康食疗</a></li>
<li><a href="KitchenFriendsRanking.html" target="_top">厨友排行</a></li>
<li><a href="#">用户搜索</a></li>
<li><a href="#">公告</a></li>
</ul>
</div>
</div>
</body>
</html>
jquery代码
<script>
// 为文本框设置 得到焦点 和 失去焦点 的事件处理方法
$("#search").on({
focus:function () {
$("#search").val("");
},blur:function (){
if($("#search").val()==""){
$("#search").val("请输入关键字");
}
}
})
</script>