我有4个div彼此相邻,每个div包含一个链接.我想动态切换"当前"的id,
例如.
<div name="1" id="current">
<a>
link
</a>
</div>
<div name="2">
<a>
link
</a>
</div>
<div name="3">
<a>
link
</a>
</div>
<div name="4">
<a>
link
</a>
</div>
如何在单击链接时动态更改当前的哪一个？
不要这样做.元素ID不应根据网页的状态而改变.请使用其他属性,例如class="current".
如果您正在使用我强烈推荐的jQuery,您可以按如下方式执行此操作:
$('div.tab a').click(function() {
$('div.tab').removeClass('current');
$(this).closest('div.tab').addClass('current');
return false;
});
要使此代码有效,您需要添加class="tab"到<div>元素中.如果您<div>在页面上有其他元素,这是一个好主意.如果执行此操作,则当前选项卡将具有属性class="tab current".jQuery知道如何正确处理这个问题.
此外,我会考虑使用id属性而不是name属性,并为您的<a>标记提供一个href属性,以便浏览器将它们显示为可点击元素.例如:
<div id="tab1" class="tab">
<a href="#">tab 1</a>
</div>
以下是如何包含此脚本的示例(假设您将JQuery保存jquery.js为与HTML页面位于同一目录中的文件):
<!DOCTYPE html>
<html>
<head>
<title>Testing jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('div.tab a').click(function() {
$('div.tab').removeClass('current');
$(this).closest('div.tab').addClass('current');
return false;
});
});
</script>
</head>
<body>
<div id="tab1" class="tab current">
<a href="#">tab1 link</a>
</div>
<div id="tab2" class="tab">
<a href="#">tab2 link</a>
</div>
<div id="tab3" class="tab">
<a href="#">tab3 link</a>
</div>
<div id="tab4" class="tab">
<a href="#">tab4 link</a>
</div>
</body>
</html>
关于这一点的几点说明:
真的,最好把你的网站的JavaScript放在一个单独的文件中并包含它<script type="text/javascript" src="filename.js"></script>,但包括它"内联",就像我已经做的那样对于小项目或只是玩弄东西.
这$(function() { ... });是简写$(document).ready(function() { ... });,这意味着一旦浏览器加载HTML文档结构,该块内的代码就会被执行.例如,您不希望在浏览器下载完其余页面之前执行JavaScript.