求大神用js或jQuery帮实现一个功能，感谢！
如题，跪谢！！具体如下图所示：1、页面加载进来的时候，默认‘本地图片’为蓝色粗体，下面显示‘选择图片‘按钮，如图片1所示。2、鼠标移动到’网址获取‘时，其字体变蓝色粗体，...
如题，跪谢！！具体如下图所示：
1、页面加载进来的时候，默认 ‘本地图片’ 为蓝色粗体，下面显示‘选择图片‘按钮，如图片1所示。
2、鼠标移动到 ’网址获取‘ 时，其字体变蓝色粗体，而 ‘本地图片’ 变为正常体，反之则相反。
3、鼠标点击 ’网址获取‘ 时，如图片2所示，下面出现input框，点击 ‘本地图片’ 时，如图片1所示。
另，鼠标移动到 '本地图片' 和 '网址获取' 时，鼠标变成小手。 展开
1、页面加载进来的时候，默认 ‘本地图片’ 为蓝色粗体，下面显示‘选择图片‘按钮，如图片1所示。
2、鼠标移动到 ’网址获取‘ 时，其字体变蓝色粗体，而 ‘本地图片’ 变为正常体，反之则相反。
3、鼠标点击 ’网址获取‘ 时，如图片2所示，下面出现input框，点击 ‘本地图片’ 时，如图片1所示。
另，鼠标移动到 '本地图片' 和 '网址获取' 时，鼠标变成小手。 展开
2个回答
展开全部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片上传</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<style type="text/css">
body {font-size: 12px;}
a {text-decoration: none;color:Black;}
.hover {color: Blue;font-weight: bold;}
</style>
</head>
<body>
<div id="div_content">
<a href="javascript:;" class="hover">本地图片</a> | <a href="javascript:;">网址获取</a>
</div>
<div id="div_local" style="margin-top:30px;">
<input type="button" id="btn_upload" value="选择图片" />
<span>大小需小于1M，建议尺寸 640*320px</span>
</div>
<div id="div_url" style="display:none; margin-top:30px;">
<input type="text" id="txt_url" />
</div>
<script type="text/javascript">
$(function () {
$("#div_content a").eq(0).click(function () {
$(this).addClass("hover");
$("#div_url").hide();
$("#div_local").show();
$("#div_content a").eq(1).removeClass("hover");
});
$("#div_content a").eq(1).click(function () {
$(this).addClass("hover");
$("#div_local").hide();
$("#div_url").show();
$("#div_content a").eq(0).removeClass("hover");
});
});
</script>
</body>
</html>
我木有做样子，只实现了功能，楼主自个加下样式吧~！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
*{margin:0;padding:0;}
body{font-size:14px;font-family:"Microsoft YaHei";}
ul,li{list-style:none;}
#tab{position:relative;}
#tab .tabList ul li{
float:left;
background:#fefefe;
background:-moz-linear-gradient(top, #fefefe, #ededed);
background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));
background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
padding:5px 0;
width:100px;
text-align:center;
margin-left:-1px;
position:relative;
cursor:pointer;
}
#tab .tabCon{
position:absolute;
left:-1px;
top:32px;
border-top:none;
width:200px;
height:100px;
}
#tab .tabCon div{
padding:10px;
position:absolute;
opacity:1;
filter:alpha(opacity=0);
}
#tab .tabList li.cur{
color:#3F0;
font-size:16px;
}
</style>
</head>
<body>
<!-- 代码 begin -->
<div id="tab" style="margin-left:460px;margin-top:20px">
<div class="tabList">
<ul>
<li class="cur">本地图片</li>
<li>网址获取</li>
</ul>
</div>
<div class="tabCon">
<div >1111</div>
<div style="display:none;">2222</div>
</div>
</div>
<script>
$(function(){
var li_num = $(".tabList li");
var div_num = $(".tabCon div");
li_num.click(function(){
$(this).addClass("cur").siblings().removeClass("cur");
var index =li_num.index($(this))
//alert(index);
div_num.eq(index).show().siblings().hide();
})
})
</script>
加载下这个jquery-1.11.1.min.js后试下。样式自己再修改下
*{margin:0;padding:0;}
body{font-size:14px;font-family:"Microsoft YaHei";}
ul,li{list-style:none;}
#tab{position:relative;}
#tab .tabList ul li{
float:left;
background:#fefefe;
background:-moz-linear-gradient(top, #fefefe, #ededed);
background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));
background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
padding:5px 0;
width:100px;
text-align:center;
margin-left:-1px;
position:relative;
cursor:pointer;
}
#tab .tabCon{
position:absolute;
left:-1px;
top:32px;
border-top:none;
width:200px;
height:100px;
}
#tab .tabCon div{
padding:10px;
position:absolute;
opacity:1;
filter:alpha(opacity=0);
}
#tab .tabList li.cur{
color:#3F0;
font-size:16px;
}
</style>
</head>
<body>
<!-- 代码 begin -->
<div id="tab" style="margin-left:460px;margin-top:20px">
<div class="tabList">
<ul>
<li class="cur">本地图片</li>
<li>网址获取</li>
</ul>
</div>
<div class="tabCon">
<div >1111</div>
<div style="display:none;">2222</div>
</div>
</div>
<script>
$(function(){
var li_num = $(".tabList li");
var div_num = $(".tabCon div");
li_num.click(function(){
$(this).addClass("cur").siblings().removeClass("cur");
var index =li_num.index($(this))
//alert(index);
div_num.eq(index).show().siblings().hide();
})
})
</script>
加载下这个jquery-1.11.1.min.js后试下。样式自己再修改下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
