我有一些 javascript 可以用两个单独的链接切换两个 div，我想在所选链接旁边添加一个小图像，例如，如果您选择要查看的 div 1，链接将有一个小元素符号在它旁边，如果您选择 div 2，div 2 上会有一个元素符号。这是脚本，任何人都可以帮忙:)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
$('a[id^="link"]').click(function(){
var vid_id = $(this).attr("id").replace("link", "#testVid");
$('div[id^="testVid"]').hide();
$(vid_id).show();
});
$('span[id^="close"]').click(function(){
var vid_id = $(this).attr("id").replace("close", "#testVid");
$(vid_id).hide();
});
});
});//]]>
</script>
</head>
<body>
<div>
<a href="#" id="link1">Click Link 1</a><br />
<a href="#" id="link2">Click Link 2</a><br />
<div id="testVid1" style="background:pink; height:300px">Test Vid Div 1<br /><br /><span id="close1">CLOSE 1</span></div>
<div id="testVid2" style="display:none;background:pink; height:300px">Test Vid Div 2<br /><br /><span id="close2">CLOSE 2</span></div>
</div>
</body>
</html>
最佳答案
您可以通过多种方式做到这一点。我能想到三个，而且我相信还有更多。
- 背景图片和填充
- 内容:之前
- 动态改变 DOM(不推荐)
#1 和#2 的想法是更改所选元素的 CSS 样式。对于 #1，您可以像这样定义样式:
.selected {
background-image: url(myselectedimage.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px; /* or whatever the size of your image is */
}
对于 #2，您将使用以下内容:
.selected:before {
content: "\u2219"; /* bullet */
}
然后，您可以像这样从所有内容中删除 .selected 类，并在单击链接时将其添加到所选链接:
$('a[id^="link"]').click(function(e){
$('a[id^="link"]').removeClass('selected');
$(e.currentTarget).addClass('selected');
...
});
$('span[id^="close"]').click(function(){
$('a[id^="link"]').removeClass('selected');
...
});
方法 #1 的优点是几乎所有现代浏览器都支持它而没有问题。 #2 的优点是它更灵活——您可以添加文本、图像、属性以及各种东西，但要注意浏览器支持可能不一致。因为您已经在使用 CSS3 选择器 (^=)，所以您可能没问题。参见 CSS Tricks了解更多信息。
方法 3 涉及在链接前插入和删除 HTML。这是可能的，但笨拙。在 CSS2 和 3 出现之前，我们就是这样做的。 :) 我不推荐它，但偶尔它是以可靠的跨浏览器方式完成任务的唯一方法(在这种情况下可能不是)。为此，请在每个链接前插入一个 标记，其中包含一个可根据链接 ID 计算的 ID(或者您可以使用 CSS 选择器来查找同级链接)。然后使用 JQuery 的 .html() 方法将 HTML 插入其中，例如:
<span id="bullet-link1"></span><a href="#" id="link1">Click Link 1</a><br />
...
<script lang="text/javascript">
$('a[id^="link"]').click(function(e) {
$('span[id^="bullet-"]').html('');
$('#bullet-' + e.currentTarget.id).html('•');
...
});
</script>
关于Javascript 目标链接状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14853669/