您好,我一直在寻找这个问题的答案。我正在尝试使用使用翻转的jquery创建导航栏。因此,三个不同的选项卡/图像分别处于“打开”状态,“关闭”状态,“单击”状态。
示例:设为首页技术支持关于
我所遇到的问题是,如果其他图像/选项卡已经处于打开/单击状态,则会使其处于单击/打开状态以关闭其他图像/选项卡。让人感到惊讶的是,每个选项卡在单击时都保持活动状态,而不是反复打开和关闭。
这里是代码
$(document).ready(function() {
// Navigation rollovers
$("#nav a").mouseover(function(){
imgsrc = $(this).children("img").attr("src");
matches = imgsrc.match(/_on/);
// don't do the rollover if state is already ON
if (!matches) {
imgsrcON = imgsrc.replace(/_off.gif$/ig,"_on.gif"); // strip off extension
$(this).children("img").attr("src", imgsrcON);
}
});
$("#nav a").click(function(){
imgsrc = $(this).children("img").attr("src");
matchesclk = imgsrc.match(/_clk/);
if (!matchesclk) {
imgsrcClkON = imgsrc.replace(/_on.gif$/ig,"_clk.gif"); // strip off extension
$(this).children("img").attr("src", imgsrcClkON);
}
});
$("#nav a").mouseout(function(){
$(this).children("img").attr("src", imgsrc);
});
});
任何帮助将不胜感激。我是jquery的新手,我真的很喜欢这个。
这将为您工作吗?
<style>
.click {
background-image: url(images/click.png);
}
.over {
background-image: url(images/over.png);
}
</style>
<script>
$(document).ready(function () {
$("#nav a").mouseover(function () {
if ($(this).attr("class") != "click")
$(this).addClass("over");
});
$("#nav a").click(function () {
$("#nav a.click").removeClass("click");
$(this).addClass("click");
});
$("#nav a").mouseout(function () {
$(this).removeClass("over");
});
});
</script>
<div id="nav">
<a>One</a>
<a>Tw0</a>
<a>Three</a>
</div>
尝试CSS。这是有关滑门技术的文章:
http://www.alistapart.com/articles/slidingdoors/
EDIT这是应用点击状态的方法(假设您的HTML有效):
$(".yourLink").cick(function() {
$(".yourLink").removeClass("selected");
$(this).addClass("selected");
});
并且只需确保在CSS中定义了“ selected”类。
结合使用背景图像+ CSS来显示标签的外观(如上所述),我建议您使用类表示不同的链接状态,然后从那里调整CSS。例如:
<div id="nav">
<a class="on" href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
</div>
<style type="text/css">
#nav a { color: blue; }
#nav a.on { color: red; }
#nav a.current { color: green; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#nav a').hover(
function(){ $(this).addClass('on'); },
function(){ $(this).removeClass('on'); }
);
});
</script>
等