你这样肯定不行，HTML中的URL路径有两种：一种是绝对路径，另一种是相对路径。前者是完整的路径地址，后者是相对于当前目录的路径地址。
你这里使用的是本地路径，属于绝对路径，但写法是错误的，本地路径需要加上file:///这个前缀，即 file:///D:\img\demo.JPG ，在真正的情况下不会采用这种方法的，因为这种方法的缺点非常明显，当你把网页文件移动到其他地方时，图片URL地址就失效了。行业里通用的做法是使用相对路径，以你的例子为例：
首先新建一个文件夹，将你的网页文件demo.html和img文件夹放进去；
接着把图片demo.JPG放到img文件夹中；
最后在demo.html中使用 img/demo.JPG的方式来引用这张图片，即：
<img src="img/demo.JPG" alt="MMMM"/>把下面这个代码保存为demo.html
尝试访问
demo.html?init=0
demo.html?init=1
demo.html?init=2
demo.html?init=3
就可以看到你想要的效果
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.tab-panel{
margin:50px auto auto
width:600px
color:white
}
.tab-head{
font-size:0
background-color:orange
}
.tab-head-item{
display:inline-block
vertical-align:middle
width:150px
height:30px
line-height:30px
font-size:12px
text-align:center
cursor:default
}
.tab-body{
width:100%
height:300px
background-color:purple
}
.tab-body-item{
display:none
height:100%
text-align:center
line-height:30px
font-size:12px
}
.tab-head-item.active{
background-color:purple
}
.tab-body-item.active{
display:block
}
</style>
<script>
window.addEventListener('load',function(){
var activeIndex = 0
var tabHead = document.getElementsByClassName('tab-head')[0]
var activeTab = function(idx){
if(idx == activeIndex) return
var headItems = document.getElementsByClassName('tab-head-item')
var bodyItems = document.getElementsByClassName('tab-body-item')
idx = idx < headItems.length ? idx : 0
headItems[activeIndex].className = headItems[activeIndex].className.replace(/\sactive/,'')
bodyItems[activeIndex].className = bodyItems[activeIndex].className.replace(/\sactive/,'')
headItems[idx].className += ' active'
bodyItems[idx].className += ' active'
activeIndex = idx
}
tabHead.addEventListener('mouseover',function(e){
var target= e.target,
idx = 0,
len = this.children.length
if(!/^tab-head-item/.test(target.className))
return
for(idx<lenidx++){
if(this.children[idx] === target)
break
}
activeTab(idx)
})
var init =/(?:^\?|&)init(?:\=)(\d+)(?=&|$)/.exec(location.search)
init = init && init[1] || 0
activeTab(init)
})
</script>
</head>
<body>
<div class="tab-panel">
<div class="tab-head">
<div class="tab-head-item active">国内</div>
<div class="tab-head-item">国际</div>
<div class="tab-head-item">体育</div>
<div class="tab-head-item">财经</div>
</div>
<div class="tab-body">
<div class="tab-body-item active">国内</div>
<div class="tab-body-item">国际</div>
<div class="tab-body-item">体育</div>
<div class="tab-body-item">财经</div>
</div>
</div>
</body>
</html>
