87,910
社区成员
发帖
与我相关
我的任务
分享js点击a标签切换图片 但是切换不了 直接跳转新页面打开图片了 求解 新手谢谢各位！！
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}else{
oldonload();
func();
}
}
//插入元素
function insertAfter(newelement,targetelement){
var parent = targetelement.parentNode;
if(parent.lastChild == targetelement){
parent.appendChild(newelement);
}else{
parent.insertBefore(newelement,targetelement.nextSibling);
}
}
//创建元素
function createpic(){
if(!document.createElement || !document.createTextNode || !document.getElementById) return false;
var img1 = document.createElement("img");
var p1 = document.createElement("p");
img1.setAttribute("id","placeholder");
img1.setAttribute("src","images/DSC_1282.JPG");
img1.setAttribute("width","600");
img1.setAttribute("height","400");
p1.setAttribute("id","description");
var txt1 = document.createTextNode("choose a pic");
p1.appendChild(txt1);
var doc = document.getElementById("doc");
insertAfter(img1,doc);
insertAfter(p1,img1);
}
//遍历a标签并调用onclick事件
function openpic() {
if (!document.getElementById) return false;
if (!document.getElementsByTagName) return false;
var get_a = document.getElementsByTagName("a");
for (var i = 0; i < get_a.length; i++) {
var source = get_a[i].getAttribute("href");
var text = get_a[i].getAttribute("title");
get_a[i].onclick = function () {
return showpic(this) ? false : true;
}
}
}
//打开切换图片
function showpic(pic) {
if (!document.getElementById("placeholder")) return false;
var picurl = pic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", picurl);
if (document.getElementById("description")) {
var pictitle = pic.getAttribute("title") ? pic.getAttribute("title") : "";
var description = document.getElementById("description");
description.firstChild.nodeValue = pictitle;
} else {
}
return true;
}
addLoadEvent(createpic);
addLoadEvent(openpic);
——————————
html代码：
<body>
<div id="parent">
<ul id="doc">
<li class="sale"><a href="images/DSC01055_1.jpg" title="firstpic" >1</a> </li>
<li class="sale important"><a href="images/DSC_0082.JPG" title="second" >2</a> </li>
<li title="I'm a li"><a href="images/DSC_0188.JPG">3</a> </li>
<li title="me too"><a href="images/DSC_1282.JPG">4</a> </li>
</ul>
</div>
</body>
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}else{
oldonload();
func();
}
}
//插入元素
function insertAfter(newelement,targetelement){
var parent = targetelement.parentNode;
if(parent.lastChild == targetelement){
parent.appendChild(newelement);
}else{
parent.insertBefore(newelement,targetelement.nextSibling);
}
}
//创建元素
function createpic(){
if(!document.createElement || !document.createTextNode || !document.getElementById) return false;
var img1 = document.createElement("img");
var p1 = document.createElement("p");
img1.setAttribute("id","placeholder");
img1.setAttribute("src","images/DSC_1282.JPG");
img1.setAttribute("width","600");
img1.setAttribute("height","400");
p1.setAttribute("id","description");
var txt1 = document.createTextNode("choose a pic");
p1.appendChild(txt1);
var doc = document.getElementById("doc");
insertAfter(img1,doc);
insertAfter(p1,img1);
}
//遍历a标签并调用onclick事件
function openpic() {
if (!document.getElementById) return false;
if (!document.getElementsByTagName) return false;
var get_a = document.getElementsByTagName("a");
for (var i = 0; i < get_a.length; i++) {
var source = get_a[i].getAttribute("href");
var text = get_a[i].getAttribute("title");
get_a[i].onclick = function () {
return showpic(this) ? false : true;
}
}
}
//打开切换图片
function showpic(pic) {
if (!document.getElementById("placeholder")) return false;
var picurl = pic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", picurl);
if (document.getElementById("description")) {
var pictitle = pic.getAttribute("title") ? pic.getAttribute("title") : "";
var description = document.getElementById("description");
description.firstChild.nodeValue = pictitle;
} else {
}
return true;
}
addLoadEvent(createpic);
addLoadEvent(openpic);
——————————
html代码：
<body>
<div id="parent">
<ul id="doc">
<li class="sale"><a href="images/DSC01055_1.jpg" title="firstpic" >1</a> </li>
<li class="sale important"><a href="images/DSC_0082.JPG" title="second" >2</a> </li>
<li title="I'm a li"><a href="images/DSC_0188.JPG">3</a> </li>
<li title="me too"><a href="images/DSC_1282.JPG">4</a> </li>
</ul>
</div>
</body>
...全文
请发表友善的回复…
发表回复
天际的海浪 2018-02-24
- 打赏
- 举报
addLoadEvent函数设计的不对
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}else{
window.onload = function () {
oldonload();
func();
}
}
}
qq_35904890 2018-02-24
- 打赏
- 举报
大意了大意了 少写了个window.onload = function(){} 各位大佬见笑了
qq_35904890 2018-02-24
- 打赏
- 举报
网页上明明加载出来新添加的 img 和p标签了
还提示TypeError: targetelement is null 搞不明白
这个跟图片无法切换有关系吗？
