weixin_52834332 2021-05-23 14:57 采纳率: 77.4%
浏览 46
已采纳

下载的导航栏模板设置的超链接打不开

从网站上下载了一个导航栏模板但是设置了自己的网页链接后跳转不了,球球大佬告诉我哪里错了?

代码如下所示:

<style>
body {
padding: 0 20px;
margin: 0;
font-family: 'Open Sans', Arial, sans-serif;
background-image: url(images/src=http%20_hbimg.b0.upaiyun.com_4bb24570109ade0ab7cd9cb5548164d722eb5040ce5c-1t5pqH_fw658&refer=http%20_hbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg.jpg);
}
#header {
padding: 0px;
height: 40px;
margin-right: auto;
margin-left: auto;
background-color: #E7E7E7;
}
#main {
padding: 0px;
height: 500px;
margin-right: auto;
margin-left: auto;
}


h1 {
text-align: center;
margin: 80px 0;
}


.mynav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
}


.mynav li:not(:last-child) {
margin-right: 20px;
}


.mynav a {
display: block;
font-size: 20px;
color: black;
text-decoration: none;
padding: 7px 15px;
}


.target {
position: absolute;
border-bottom: 4px solid transparent;
z-index: -1;
-webkit-transform: translateX(-60px);
transform: translateX(-60px);
}


.mynav a,
.target {
-webkit-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
#footer {
padding: 0px;
height: 80px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<style type="text/css">
* {padding: 0;margin: 0;font-family: "微软雅黑";font-size: 14px;}
ul,li {list-style: none;}
a {text-decoration: none;color: black;}
.box{width: 800px;height: 400px;margin: 20px auto;overflow: hidden;position: relative;}
.box-1 ul{}
.box-1 ul li{width: 800px;height: 400px;position: relative;overflow: hidden;}
.box-1 ul li img{display:block;width: 800px; height: 400px;}
.box-1 ul li h2{position: absolute;left: 0;bottom: 0;height: 40px;width:300px;background: rgba(125,125,120,.4);text-indent: 2em;
padding-right:500px ;font-size: 15px;line-height: 40px;text-overflow: ellipsis;overflow: hidden;
white-space: nowrap;font-weight: normal;color: ghostwhite}
.box-2{position: absolute;right: 10px;bottom: 14px;}
.box-2 ul li{float:left;width: 12px;height: 12px;overflow: hidden; margin: 0 5px; border-radius: 50%;
background: rgba(0,0,0,0.5);text-indent: 100px;cursor: pointer;}
.box-2 ul .on{background: rgba(255,255,255,0.6);}
.box-3 span{position: absolute;color: white;background: rgba(125,125,120,.3);width: 50px;height: 80px;
top:50%; font-family: "宋体";line-height: 80px;font-size:60px;margin-top: -40px;
text-align: center;cursor: pointer;}
.box-3 .prev{left: 10px;}
.box-3 .next{right: 10px;}
.box-3 span::selection{background: transparent;}
.box-3 span:hover{background: rgba(125,125,120,.8);}
</style>


<script type="text/javascript">
window.onload = function(){
function $(param){
if(arguments[1] == true){
return document.querySelectorAll(param);
}else{
return document.querySelector(param);
}
}
var $box = $(".box");
var $box1 = $(".box-1 ul li",true);
var $box2 = $(".box-2 ul");
var $box3 = $(".box-3");
var $length = $box1.length;


var str = "";
for(var i =0;i<$length;i++){
if(i==0){
str +="<li class='on'>"+(i+1)+"</li>";
}else{
str += "<li>"+(i+1)+"</li>";
}
}
$box2.innerHTML = str;


var current = 0;


var timer;
timer = setInterval(go,1000);
function go(){
for(var j =0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
if($length == current){
current = 0;
}
$box1[current].style.display = "block";
$box2.children[current].className = "on";
current++;
}


for(var k=0;k<$length;k++){
$box1[k].onmouseover = function(){
clearInterval(timer);
}
$box1[k].onmouseout = function(){
timer = setInterval(go,1000);
}
}
for(var p=0;p<$box3.children.length;p++){
$box3.children[p].onmouseover = function(){
clearInterval(timer);
};
$box3.children[p].onmouseout = function(){
timer = setInterval(go,1000);
}
}


for(var u =0;u<$length;u++){
$box2.children[u].index = u;
$box2.children[u].onmouseover = function(){
clearInterval(timer);
for(var j=0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
this.className = "on";
$box1[this.index].style.display = "block";
current = this.index +1;
}
$box2.children[u].onmouseout = function(){
timer = setInterval(go,1000);
}
}


$box3.children[0].onclick = function(){
back();
}
$box3.children[1].onclick = function(){
go();
}
function back(){
for(var j =0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
if(current == 0){
current = $length;
}
$box1[current-1].style.display = "block";
$box2.children[current-1].className = "on";
current--;
}
}
</script>
<body>
<div id="header">
<script src="/demos/googlegg.js"></script>
<nav class="mynav">
<ul>
<li><a href="index.html">首页</a></li>
<li>
<h3><a href="1.html">个人介绍</a></h3>
</li>
<li><a href="2.html">日常生活</a></li>
<li><a href="3.html">学习情况</a></li>
<li><a href="4.html">军训图鉴</a></li>
<li><a href="5.html">感悟心得</a></li>
<li><a href="6.html">关于网站</a></li>
</ul>
</nav>




<span class="target"></span>


<script>
"use strict";


(function () {


var target = document.querySelector(".target");
var links = document.querySelectorAll(".mynav a");
var colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];


function mouseenterFunc() {
if (!this.parentNode.classList.contains("active")) {
for (var i = 0; i < links.length; i++) {
if (links[i].parentNode.classList.contains("active")) {
links[i].parentNode.classList.remove("active");
}
links[i].style.opacity = "0.25";
}


this.parentNode.classList.add("active");
this.style.opacity = "1";


var width = this.getBoundingClientRect().width;
var height = this.getBoundingClientRect().height;
var left = this.getBoundingClientRect().left + window.pageXOffset;
var top = this.getBoundingClientRect().top + window.pageYOffset;
var color = colors[Math.floor(Math.random() * colors.length)];


target.style.width = width + "px";
target.style.height = height + "px";
target.style.left = left + "px";
target.style.top = top + "px";
target.style.borderColor = color;
target.style.transform = "none";
}
}


for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function (e) {
return e.preventDefault();
});
links[i].addEventListener("mouseenter", mouseenterFunc);
}


function resizeFunc() {
var active = document.querySelector(".mynav li.active");


if (active) {
var left = active.getBoundingClientRect().left + window.pageXOffset;
var top = active.getBoundingClientRect().top + window.pageYOffset;


target.style.left = left + "px";
target.style.top = top + "px";
}
}


window.addEventListener("resize", resizeFunc);
})();</script>


<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div></div>
<div id="main">
<div class="box">
<div class="box-1">
<ul>
<li>
<img src="images/1.png" ></img>
</li>
<li>
<img src="images/2.png" ></img>
</li>
<li>
<img src="images/3.png" ></img>
</li>
<li>
<img src="images/4.png" ></img>
</li>
<li>
<img src="images/5.png"></img>
</li>
<li>
<img src="images/6.png" ></img>
</li>
<li>
<img src="images/7.png" ></img>
</li>
</ul>
</div>
<div class="box-2">
<ul>


</ul>
</div>
<div class="box-3">
<span class="prev"> < </span>
<span class="next"> > </span>
</div>
</div></div>
<div id="footer"><table width="50%" border="0" align="center">
<tr align="center">
<td><a href="7.html">网站声明</a></td>
<td>|</td>
<td><a href="8.html">关于课程</a></td>
<td>|</td>
<td>友情链接</td>
<td>|</td>
<td><a href="9.html">联系我</a></td>
</tr>
</table>
</div>

  • 写回答

3条回答 默认 最新

  • 关注

    去掉这三行代码

    links[i].addEventListener("click", function (e) {
    return e.preventDefault();
    });
     

     

    表格设置居中改用

    <table width="50%" border="0" style="margin: 0 auto;">

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥20 Html备忘录页面制作
  • ¥15 黄永刚的晶体塑性子程序中输入的材料参数里的晶体取向参数是什么形式的?
  • ¥20 数学建模来解决我这个问题
  • ¥15 计算机网络ip分片偏移量计算头部是-20还是-40呀
  • ¥15 stc15f2k60s2单片机关于流水灯,时钟,定时器,矩阵键盘等方面的综合问题
  • ¥15 YOLOv8已有一个初步的检测模型,想利用这个模型对新的图片进行自动标注,生成labellmg可以识别的数据,再手动修改。如何操作?
  • ¥30 NIRfast软件使用指导
  • ¥20 matlab仿真问题,求功率谱密度
  • ¥15 求micropython modbus-RTU 从机的代码或库?
  • ¥15 django5安装失败