这是我想要的:
现在更详细:
我有2个iframe,一个在另一个之上。上面的那个有4个按钮/图像,下面的一个是当点击这些按钮/图像之一时将显示的URL /链接。我有这个工作......
我现在想要的是让这些按钮在点击时将图像从非活动(即浅粉色)变为活动(即红色)状态。此外,当我点击4个按钮中的另一个时,它将变为红色,之前的活动(红色)按钮/图像必须变回其无效状态(浅粉色)。所以我想要2张图片:(1)active.png和(2)inactive.png。
另外,当我将鼠标悬停在按钮上时,我希望按钮更改为active.png。这个我能够用onmouseover和onmouseout效果来管理。它只是ACTIVE部分是我无法弄清楚的。
我是否需要使用javascript,或者我可以不使用它,以防某些用户将其禁用?
我也在考虑使用单选按钮,然后用我的active.png和inactive.png使用css或其他东西对它们进行换肤,但我也不知道如何做到这一点:P我不知道什么是最好和最简单的要走的路?
------------ ----------- UPDATE
好吧,我有一些工作,但我还没有完全的方式。它甚至可能不是要走的路,但我所做的是创建4个链接并给它们一个id(ie.button1,button2 ..)
然后在css中我为每个人做了这个:
button1 {width:66px;身高:70px;显示:块;背景图像:网址(图像/ inactive1.png); } button1:悬停{width:66px;身高:70px;显示:块;背景图像:网址(图像/ active1.png); } button1:focus {width:66px;身高:70px;显示:块;背景图像:网址(图像/ active1.png); }
但我不希望它失去焦点,除非点击另一个按钮。如果我点击页面上的任何地方,现在它失去了焦点:(我该如何解决这个问题?
答案 0 :(得分:0)
没有JS的唯一方法是创建四个静态页面,如原始帖子的评论中所述。
你的身体标记看起来像这样:
<ul id="nav">
<li class="active"><a href="site1.htm"></a></li>
<li><a href="site2.htm"></a></li>
<li><a href="site3.htm"></a></li>
<li><a href="site4.htm"></a></li>
</ul>
<iframe src="www.url.com">
</iframe>
上面的列表是您的导航。您不需要单独的iframe
,因为您有四个静态页面。在每个静态页面中,包含活动静态页面链接的li
- 元素将获得一个名为“active”的类。
iframe
存储您希望在其中显示的网址。
在您的css文件中,您可以像这样设置导航样式:
#nav a {background: url('images/inactive.png');}
#nav a:hover,
#nav li.active a{
background: url('images/active1.png');
}
这应该可行,但使用JS的解决方案会更优雅。
答案 1 :(得分:0)
我制作了涵盖所有文件的两个文件:
<!DOCTYPE html>
<html>
<head runat="server">
<title>Deep East Music</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.buttons { float:left; width:60px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
.buttons[isselected = "true"] { background-color:#ff7373; }
.buttons[isselected = "false"] { background-color:#cccccc; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#button1").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
});
$("#button2").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");
////Use one of these if you need to reload the iframe
//$('#myiframe').contentWindow.location.reload(true);
//$("#myiframe").attr("src", $("#myiframe").attr("src"));
});
$("#button3").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
});
$("#button4").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
});
});
function ClickedButton1 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
return false;
};
function ClickedButton2 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");
return false;
};
function ClickedButton3 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
return false;
};
function ClickedButton4 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
return false;
};
</script>
</head>
<body>
<div>
<div id="button1" class="buttons" isselected="true">button1</div>
<div id="button2" class="buttons" isselected="false">button2</div>
<div id="button3" class="buttons" isselected="false">button3</div>
<div id="button4" class="buttons" isselected="false">button4</div>
<iframe id="mybuttonsiframe" width="100%" height="60" scrolling="no" frameborder="no" src="buttons.htm"></iframe>
<iframe id="myiframe" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173"></iframe>
</div>
</body>
</html>
而按钮.htm看起来像是:
<!DOCTYPE html>
<html>
<head runat="server">
<title>Deep East Music</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
/* CSS Here */
.iframebuttons { float:left; width:100px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
.iframebuttons[isselected = "true"] { background-color:#ff7373; }
.iframebuttons[isselected = "false"] { background-color:#cccccc; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#iframebutton1").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton1();
});
$("#iframebutton2").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton2();
});
$("#iframebutton3").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton3();
});
$("#iframebutton4").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton4();
});
});
</script>
</head>
<body>
<input type="button" id="iframebutton1" class="iframebuttons" isselected="true" value="iframebutton1" />
<input type="button" id="iframebutton2" class="iframebuttons" isselected="false" value="iframebutton2" />
<input type="button" id="iframebutton3" class="iframebuttons" isselected="false" value="iframebutton3" />
<input type="button" id="iframebutton4" class="iframebuttons" isselected="false" value="iframebutton4" />
</body>
</html>