Question

我为我的网站下载了一个html模板，并使用我的内容进行了更新。导航栏就像家，服务，关于我们，团队和联系。当我们启动页面时，首先它将加载幻灯片，这是家庭，当我们点击服务时，它将跳转到服务。但现在我想分开＆＃34; home＆＃34;形式幻灯片。在幻灯片中有一个按钮＆＃34;立即开始＆＃34;。当我们点击它时，它会跳转到服务。但现在我需要将家与欢迎幻灯片分开，当我点击开始时它应该跳转到家。我会在家里添加一个内容。它是一个单页模板。

＆＃13;

<header id="home">
    <div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
      <div class="carousel-inner">
        <div class="item active" style="background-image: url(images/slider/1.jpg)">
          <div class="caption">
            <h1 class="animated fadeInLeftBig">Welcome to <span>Mysite</span></h1>
            <p class="animated fadeInRightBig">Some content</p>
            <a data-scroll class="btn btn-start animated fadeInUpBig" href="#services">Start now</a>
          </div>
        </div>
        <div class="item" style="background-image: url(images/slider/2.jpg)">
          <div class="caption">
            <h1 class="animated fadeInLeftBig">SAY HELLOW TO <span>My page</span></h1>
            <p class="animated fadeInRightBig">Some content</p>
            <a data-scroll class="btn btn-start animated fadeInUpBig" href="#services">Start now</a>
          </div>
        </div>
        <div class="item" style="background-image: url(images/slider/3.jpg)">
          <div class="caption">
            <h1 class="animated fadeInLeftBig">We are <span>Creative</span></h1>
      
            <a data-scroll class="btn btn-start animated fadeInUpBig" href="#services">Start now</a>
          </div>
        </div>
      </div>
      <a class="left-control" href="#home-slider" data-slide="prev"><i class="fa fa-angle-left"></i></a>
      <a class="right-control" href="#home-slider" data-slide="next"><i class="fa fa-angle-right"></i></a>
      <a id="tohash" href="#services"><i class="fa fa-angle-down"></i></a>

    </div><!--/#home-slider-->
    <div class="main-nav">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">
            <h1><img class="img-responsive" src="images/logo.png" alt="logo"></h1>
          </a>                    
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">                 
            <li class="scroll active"><a href="#home">Home</a></li>
            <li class="scroll"><a href="#services">Service</a></li> 
            <li class="scroll"><a href="#about-us">About Us</a></li>
            <li class="scroll"><a href="#team">Team</a></li>
            <li class="scroll"><a href="#contact">Contact</a></li>       
          </ul>
        </div>
      </div>
    </div><!--/#main-nav-->
  </header><!--/#home-->
  <section id="services">
    <div class="container">
	 <div class="col-sm-7 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
      <div class="text-right our-services">
		<div class="text-center service-icon">
		<i class="fa fa-flask"></i>
		</div>
	</div>
	</div>
        <div class="row">
		<div class="col-sm-8 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
            <div class="text-right service-info">
              <h3><b><u>Service Content</b></h3></div>
			  </div>
			  </div>
			  		<div class="col-md-8 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
				<img  src="images/content/service-1.jpg" alt="service1" style="width:140%;height:50%;">
          </div>
		  <div class="col-sm-7 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
            <div class="text-right our-services">
			<div class="text-center service-icon">
              <i class="fa fa-check"></i>
            </div>
		</div>
	</div>
			<div class="col-sm-8 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="450ms">
            <div class="text-right	service-info">
          	  <h3><b><u>Service Content</u></b></h3>
			  </div>
			  </div>
			  <div class="col-sm-8 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="450ms">
				<img src="images/content/service-2.jpg" alt="service1" style="width:140%;height:50%;">
            </div>
          <div class="col-sm-7 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="550ms">
		  <div class="text-right our-services">
            <div class="text-center service-icon">
              <i class="fa fa-life-bouy"></i>
            </div>
		</div>
	</div>
			<div class="col-sm-12 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="550ms">
            <div class="text-center service-info">
              <h3><b><u>Service Content</u></b></h3>
			  </div>
			  </div>
			  <div class="col-sm-9 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="550ms">
				<img  src="images/content/service-3.jpg" alt="service1" style="width:140%;height:50%;">
            </div>
         </div>
      </div>
    </div>
  </section><!--/#services-->

＆＃13;

我尝试修改它但它没有发生。我需要一个人来帮助我。这是我的HTML代码。

Answer 1

你要重定向的地方只需在点击的链接的href中传递该部分的ID，如下所示。

href="#services"   Link with this value navigate user to services section

href="#Home" Link with this value navigate user to home section

您可以根据要求更新您的HTML。

HTML跳转链接 - 如何创建跳转链接

1 个答案: