Question

下面是我的代码。我想在我的index.html页面和其他页面之间创建一个链接，以便每当我单击登录名或任何其他页面时，它都应将我重定向到特定页面。我该如何实现？

我尝试使用href，但是它不起作用，因为我猜我已经使用过span并在CSS中设置了span的样式。这是侧栏导航响应页面。

This is how the page looks
This is how it looks underlined

index.html代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
  <script src="https://use.fontawesome.com/d1341f9b7a.js"></script>

  <title>MyWeb</title>

</head>

<body>

  <div class="header">
    <div class="searchbox">
      <input class="search-txt" type="text" name="" placeholder="Type to search">
      <a class="search-btn" href="#">
        <i class="fas fa-search"></i>
      </a>
    </div>
  </div>

  <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
  </label>
  <div id="sidebarMenu">
    <ul class="siderbarMenuInner">
      <li> Rahul <span>MusicLibrary</span></li>
      <li> <a href="login.html"></a> <span>Login</span></li>
      <li> <a href="www.instagram.com"></a> <span>Contact Us</span></li>
      <li> <a href="about.html"></a> <span>About</span></li>
    </ul>
  </div>
</body>

</html>

login.html代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Animated Login Form</title>
  <link rel="stylesheet" href="login.css"> 
</head> 

<body>

  <form class="box" action="index.html" method="post">
    <h1>Login</h1>
    <input type="text"     name=""  placeholder="Username">
    <input type="password" name=""  placeholder="Password">
    <input type="submit"  name=""  value="Login">
  </form>

</body>

</html>

CSS代码：

body {
  overflow-x: hidden; 
  height: 100%; 
}

body{
  font-family: tahoma;
  background: linear-gradient(90deg, #3c6382, #82ccdd);
margin: 0;
padding: 0;
}

.header{
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  background-color: #fc466b;
  position: fixed; 
  height: 60px !important;
  overflow: hidden;
  z-index: 10;
}

.searchbox{
  position: absolute;
  border-radius: 40px;
  right: 2%;
  background: #2f3640;
  height: 40px;
  top: 15%;
  padding: 0.1%;

}

.search-txt{
  border: none;
  background: none;
  outline:none;
  float:left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px; 

}

.search-btn{
  color: #fc466b;
  float:right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  align-items: center;
  justify-content: center;
 transition: 0.4s;
 text-decoration: none;
}

.searchbox:hover > .search-txt{
  width: 500px;
  padding: 0 6px;
}

.searchbox:hover > .search-btn{
  background: white;
}

.main{
  margin: 0 auto;
  display: block;
  height: 100%;
  margin-top: 60px;
}

.mainInner{
  display: table;
   height: 100%;
   width: 100%;
   text-align: center;
}

#sidebarMenu{

 height: 100%;
 position: fixed;
 left: 0;
 width: 250px;
 margin-top: 60px;
 transform: translateX(-250px);
 transition: transform 250ms ease-in-out;
 background:linear-gradient(180deg, #fc466b, #3f5efb);

}

.siderbarMenuInner{
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.siderbarMenuInner li{
 list-style: none;
 color: white;
 text-transform: uppercase;
 font-weight: bold;
 padding: 20px;
 cursor: pointer;
 border-bottom: 1px solid rgba(255,255,255,0.10);
 text-decoration: none;

}
.siderbarMenuInner li span{
  display: block;
  font-size: 14px;
  color:rgba(255,255,255,0.50);
  text-decoration: none !important;
  color: inherit;
}

.sidebarMenuInner li a{
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;

}

input[type="checkbox"]:checked ~ #sidebarMenu{

  transform: translateX(0);
}
input[type=checkbox]{
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

.sidebarIconToggle{

  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width:100%;
  top:22px;
  left: 15px;
  height: 22px;
  width: 22px;
}

.spinner{
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: white;
}

.horizontal{
   transition: all 0.3s;
   box-sizing: border-box;
   position: relative;
   float: left;
   margin-top: 3px;
}

.diagonal.part-1{
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float:left;
}

.diagonal.part-2{
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
  margin-top: 3px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal{
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1{
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2{
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}

Answer 1

每次单击“登录”时，您只会点击一个span标签而不是链接。请尝试以下方法：

<a href="login.html"><span>Login</span></a>

Answer 2

<div id="sidebarMenu">
    <ul class="siderbarMenuInner">
      <li> Rahul <span>MusicLibrary</span></li>
      <li> <a href="login.html">Login</a></li>
      <li> <a href="www.instagram.com">Contact Us</a></li>
      <li> <a href="about.html">About</a></li>
    </ul>
  </div>

您的</a>标签在<span>标签之前关闭

编辑：

在您的CSS文件中添加

a{
text-decoration: none !important;

/* TO CHANGE BLUE COLOR*/
color: inherit;
}

Answer 3

  <div id="sidebarMenu">
    <ul class="siderbarMenuInner">
      <li> Rahul <span>MusicLibrary</span></li>
      <li> <a href="login.html"><span>Login</span></a></li>
      <li> <a href="www.instagram.com"><span>Contact Us</span></a></li>
      <li> <a href="about.html"><span>About</span></a></li>
    </ul>
  </div>

您应将<span>元素放在锚标记<a>中。

因此，当您编写<a href="logn.html"></a>时，是在告诉浏览器使链接在空字符串上可单击。因为您没有在<a>标记内包含任何文本或任何其他元素！

但是，如果您这样写：<a href="logn.html">LOGIN</a>，则是告诉浏览器，当用户单击LOGIN文本时，链接才可以单击。同样，您可以封装任何内容。您甚至还可以在锚标记中包含<img>。例如：<a href="index.html"><img src="logo" /></a>

希望有帮助。

如何将（html）登录页面和其他页面链接到索引页面

3 个答案: