Question

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

我的计划是进入＆＃34; Home＆＃34;第7页图片各有一个链接到＆＃34; Schedule＆＃34;页。当我点击图片X时，它应该带我进入“计划”页面并选择并显示星期日（这是默认值）。但是当点击Home上的Y时，它应该带我去那里并选择/显示星期一。我实现了这个： http://jsfiddle.net/4vaxE/

＆＃13;

$('#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();
});

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

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

Answer 1

我认为我放在一起的演示可能对你有帮助。

这里我们有3个链接（在你的情况下是图片）。单击链接，滚动到页面的日程表部分，然后单击相关日期。我们使用jquery trigger方法

＆＃13;

// 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();
})

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

这里也是一个小提琴：https://jsfiddle.net/BradChelly/f2uppL7q/1/

如何应用正确的html锚点

1 个答案: