如何应用正确的 html 锚点

Question

我想获得有关如何实现此目的的一些提示：我使用这个免费模板创建了一个网页：freehtml5.co - Fitness

我的计划是在 "Home" 页面上有 7 张图片，每张图片都有一个 link 到 "Schedule" 页面。当我单击图片 X 时，它应该将我带到“日程安排”页面并选择并显示星期日（这是默认设置）。但是当点击主页上的图片 Y 时，它应该会带我到 select/display 星期一。我实现了这个： http://jsfiddle.net/4vaxE/

$('#showdiv1').hover(function () {
    $('div[id^=div]').hide();
    $('#div1').show();
});
$('#showdiv2').hover(function () {
    $('div[id^=div]').hide();
    $('#div2').show();
});

$('#showdiv3').hover(function () {
    $('div[id^=div]').hide();
    $('#div3').show();
});

$('#showdiv4').hover(function () {
    $('div[id^=div]').hide();
    $('#div4').show();
});

.button {
    cursor:pointer;
    display:inline-block;
    margin:10px;
}
#div1, #div2, #div3, #div4 {
    display:none;
}
#div1 {
    background:red;
    padding:20px;
    width:100px;
    text-align:center;
}
#div2 {
    background:blue;
    padding:20px;
    width:100px;
    text-align:center;
}
#div3 {
    background:orange;
    padding:20px;
    width:100px;
    text-align:center;
}
#div4 {
    background:green;
    padding:20px;
    width:100px;
    text-align:center;
}
a {
    color:aqua;
    -webkit-filter: grayscale(1.0);
}
a:hover {
    color:red;
    -webkit-filter: grayscale(0.0);
}
a.buttondefault {
    display:cursor:pointer;
    display:inline-block;
    -webkit-filter: grayscale(0.0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<a class="buttondefault" id="showdiv1">Div 1</a>

<a class="button" id="showdiv2">Div 2</a>

<a class="button" id="showdiv3">Div 3</a>

<a class="button" id="showdiv4">Div 4</a>

</div>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

然而，从另一个页面 link 到代码中使用的特定 div 对我来说并不是那么简单。谢谢

Answer 1

我认为我整理的这个演示可能对您有所帮助。

这里有 3 个 links（您的案例中的图片）。单击 link，滚动到页面的日程安排部分并单击相关日期。我们使用jquerytrigger方法

// when the link (or in your cash picture link) is clicked
$('.schedule_links .btn').click(function() {
  // get the data attribute for the schedule day we want to click.
  day = $(this).data('schedule_link');
  // trigger the click event on the relevant schedule button.
  $('#' + day).trigger('click');
})



// This bit is already being handled by your template, just here to demonstrate:

$('.schedule_link').click(function() {
  $('.schedule_link').removeClass('selected');
  $(this).addClass('selected');
  day = "#schedule_" + $(this).attr('id');
  $('.schedule').hide();
  $(day).show();
})

a {
  text-decoration: none;
}

.btn {
  display: inline-block;
  background: #fff;
  border: 2px solid #ddd;
  padding: 5px 15px;
  border-radius: 5px;
  margin: 5px;
}

.schedule {
  height: 500px;
  width: 500px;
  background: lightgrey;
  border: 2px solid darkgrey;
  display: none;
}

.selected {
  background: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="schedule_links">
  <a class="btn" href="#schedules" data-schedule_link="monday">Link 1</a>
  <a class="btn" href="#schedules" data-schedule_link="tuesday">Link 2</a>
  <a class="btn" href="#schedules" data-schedule_link="wednesday">Link 3</a>
</div>
<!-- spacer to simulate the schedules not being in view when links are clicked. -->
<div class="spacer" style="height:20vh;"></div>

<div id="schedules">
  <a class="btn schedule_link" id="monday" href="#">Monday</a>
  <a class="btn schedule_link" id="tuesday" href="#">Tuesday</a>
  <a class="btn schedule_link" id="wednesday" href="#">Wednesday</a>

  <div class="schedule" id="schedule_monday">
    This is mondays schedule
  </div>

  <div class="schedule" id="schedule_tuesday">
    This is tuesdays schedule
  </div>

  <div class="schedule" id="schedule_wednesday">
    This is wednesdays schedule
  </div>
</div>

这里还有一个 fiddle：https://jsfiddle.net/BradChelly/f2uppL7q/1/

如何应用正确的 html 锚点

how to apply correct html anchors

html

anchor

hyperlink