javascript - 我无法重定向并转到特定部分

标签 javascript jquery html

我正在尝试重定向到此页面并转到该页面的特定部分，该部分由 java 脚本支持来移动。我希望能够去说，删除部分。但我无法使用 localhost/entry.php#delete 实现它。我究竟做错了什么？下面是片段。

(function($) {
  // constants
  var SHOW_CLASS = 'show',
    HIDE_CLASS = 'hide',
    ACTIVE_CLASS = 'active';

  $('.tabs').on('click', 'li a', function(e) {
    e.preventDefault();
    var $tab = $(this),
      href = $tab.attr('href');

    $('.active').removeClass(ACTIVE_CLASS);
    $tab.addClass(ACTIVE_CLASS);

    $('.show')
      .removeClass(SHOW_CLASS)
      .addClass(HIDE_CLASS)
      .hide();

    $(href)
      .removeClass(HIDE_CLASS)
      .addClass(SHOW_CLASS)
      .hide()
      .fadeIn(550);
  });
})(jQuery);
@import url(http://fonts.googleapis.com/css?family=Roboto:100);
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
  background: #1a1a1a;
  color: white;
  font-family: 'Roboto';
}

.flat-form {
  background: #e74c3c;
  margin: 25px auto;
  width: 80%;
  height: 450px;
  position: relative;
  font-family: 'Roboto';
}

.red-form {
  background: #e74c3c;
  margin: 25px auto;
  width: 80%;
  position: relative;
  font-family: 'Roboto';
  padding: 15px;
}

label {
  font-weight: bold;
}

.tabs {
  background: #c0392b;
  height: 40px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 20px;
}

.tabs li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}

.tabs a {
  background: #c0392b;
  display: block;
  float: left;
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 12px 22px 12px 22px;
  /*border-right: 1px solid @tab-border;*/
}

.tabs li:last-child a {
  border-right: none;
  width: 174px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.tabs a.active {
  background: #e74c3c;
  border-right: none;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.form-action {
  padding: 0 20px;
  position: relative;
}

.form-action h1 {
  font-size: 42px;
  padding-bottom: 10px;
}

.form-action p {
  font-size: 12px;
  padding-bottom: 10px;
  line-height: 25px;
}

form {
  padding-right: 20px !important;
}

form input[type=text],
form input[type=password],
form input[type=submit] {
  font-family: 'Roboto';
}

form input[type=text],
form input[type=password] {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 15px;
  background: #fff;
  border: none;
  color: #e74c3c;
  outline: none;
}

.dark-box {
  background: #5e0400;
  box-shadow: 1px 3px 3px #3d0100 inset;
  height: 40px;
  width: 50px;
}

.form-action .dark-box.bottom {
  position: absolute;
  right: 0;
  bottom: -24px;
}

.tabs + .dark-box.top {
  position: absolute;
  right: 0;
  top: 0px;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.button {
  border: none;
  display: block;
  background: #136899;
  height: 40px;
  width: 80px;
  color: #ffffff;
  text-align: center;
  border-radius: 5px;
  /*box-shadow: 0px 3px 1px #2075aa;*/
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  transition: all 0.15s linear;
  font-weight: bold;
}

.button:hover {
  background: #1e75aa;
  /*box-shadow: 0 3px 1px #237bb2;*/
}

.button:active {
  background: #136899;
  /*box-shadow: 0 3px 1px #0f608c;*/
}

::-webkit-input-placeholder {
  color: #e74c3c;
  font-weight: bold;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #e74c3c;
  font-weight: bold;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #e74c3c;
  font-weight: bold;
}

:-ms-input-placeholder {
  color: #e74c3c;
  font-weight: bold;
}

select {
  margin: 10px;
  border: 1px solid #111;
  background: transparent;
  width: 300px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  font-weight: bold;
  color: #504848;
}
<body>

  <div class="container">
    <div class="flat-form">
      <ul class="tabs">
        <li>
          <a href="#insert" name="insert" class="active">Insert</a>
        </li>
        <li>
          <a href="#update" name="update">Update</a>
        </li>
        <li>
          <a href="#delete" name="delete">Delete</a>
        </li>
      </ul>
      <div id="insert" class="form-action show">
        <h1>Insert</h1>
        <p>
          insert data goes here
        </p>

      </div>
      <div id="update" class="form-action hide">
        <h1>Update</h1>
        <p>
          update data goes here
        </p>

      </div>

      <div id="delete" class="form-action hide">
        <h1>Delete</h1>
        <p>
          delete data goes here
        </p>

      </div>

    </div>
  </div>
  <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>

最佳答案

anchor 仅适用于页面周围的简单导航、更改选项卡等。您需要添加一些额外的代码，例如:

(function($) {
  // constants
  var SHOW_CLASS = 'show',
    HIDE_CLASS = 'hide',
    ACTIVE_CLASS = 'active';
  
    switchTab = function(href){
      var $link = $('a[href=' + href + ']'),
        $tab = $(href);

      $('.active').removeClass(ACTIVE_CLASS);
      $link.addClass(ACTIVE_CLASS);

      $('.show')
        .removeClass(SHOW_CLASS)
        .addClass(HIDE_CLASS)
        .hide();

      $($tab)
        .removeClass(HIDE_CLASS)
        .addClass(SHOW_CLASS)
        .hide()
        .fadeIn(550);
  }

  $('.tabs').on('click', 'li a', function(e) {
    e.preventDefault();
    switchTab($(this).attr('href'));
  });
  if(window.location.hash){
    switchTab(window.location.hash);
  }
})(jQuery);
@import url(http://fonts.googleapis.com/css?family=Roboto:100);
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
  background: #1a1a1a;
  color: white;
  font-family: 'Roboto';
}

.flat-form {
  background: #e74c3c;
  margin: 25px auto;
  width: 80%;
  height: 450px;
  position: relative;
  font-family: 'Roboto';
}

.red-form {
  background: #e74c3c;
  margin: 25px auto;
  width: 80%;
  position: relative;
  font-family: 'Roboto';
  padding: 15px;
}

label {
  font-weight: bold;
}

.tabs {
  background: #c0392b;
  height: 40px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 20px;
}

.tabs li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}

.tabs a {
  background: #c0392b;
  display: block;
  float: left;
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 12px 22px 12px 22px;
  /*border-right: 1px solid @tab-border;*/
}

.tabs li:last-child a {
  border-right: none;
  width: 174px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.tabs a.active {
  background: #e74c3c;
  border-right: none;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.form-action {
  padding: 0 20px;
  position: relative;
}

.form-action h1 {
  font-size: 42px;
  padding-bottom: 10px;
}

.form-action p {
  font-size: 12px;
  padding-bottom: 10px;
  line-height: 25px;
}

form {
  padding-right: 20px !important;
}

form input[type=text],
form input[type=password],
form input[type=submit] {
  font-family: 'Roboto';
}

form input[type=text],
form input[type=password] {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 15px;
  background: #fff;
  border: none;
  color: #e74c3c;
  outline: none;
}

.dark-box {
  background: #5e0400;
  box-shadow: 1px 3px 3px #3d0100 inset;
  height: 40px;
  width: 50px;
}

.form-action .dark-box.bottom {
  position: absolute;
  right: 0;
  bottom: -24px;
}

.tabs + .dark-box.top {
  position: absolute;
  right: 0;
  top: 0px;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.button {
  border: none;
  display: block;
  background: #136899;
  height: 40px;
  width: 80px;
  color: #ffffff;
  text-align: center;
  border-radius: 5px;
  /*box-shadow: 0px 3px 1px #2075aa;*/
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  transition: all 0.15s linear;
  font-weight: bold;
}

.button:hover {
  background: #1e75aa;
  /*box-shadow: 0 3px 1px #237bb2;*/
}

.button:active {
  background: #136899;
  /*box-shadow: 0 3px 1px #0f608c;*/
}

::-webkit-input-placeholder {
  color: #e74c3c;
  font-weight: bold;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #e74c3c;
  font-weight: bold;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #e74c3c;
  font-weight: bold;
}

:-ms-input-placeholder {
  color: #e74c3c;
  font-weight: bold;
}

select {
  margin: 10px;
  border: 1px solid #111;
  background: transparent;
  width: 300px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  font-weight: bold;
  color: #504848;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>

  <div class="container">
    <div class="flat-form">
      <ul class="tabs">
        <li>
          <a href="#insert" name="insert" class="active">Insert</a>
        </li>
        <li>
          <a href="#update" name="update">Update</a>
        </li>
        <li>
          <a href="#delete" name="delete">Delete</a>
        </li>
      </ul>
      <div id="insert" class="form-action show">
        <h1>Insert</h1>
        <p>
          insert data goes here
        </p>

      </div>
      <div id="update" class="form-action hide">
        <h1>Update</h1>
        <p>
          update data goes here
        </p>

      </div>

      <div id="delete" class="form-action hide">
        <h1>Delete</h1>
        <p>
          delete data goes here
        </p>

      </div>

    </div>
  </div>
  <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>

关于javascript - 我无法重定向并转到特定部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35519698/

上一篇：javascript - 将 JavaScript 中的数学语句中的数字更改为带分隔符的数字

下一篇：javascript - 如何使用Jquery在对话框中显示要删除的项目？

相关文章：

jquery - ASP.NET 的 jqGrid 的免费替代品？

html - 如何让文件下载需要用户名和密码

html - 带有 HTML 实体的 XSLT 字符串 - 如何让它呈现为 HTML？

javascript - 移动网站根据方向更改调整大小在 Safari 中不起作用

javascript - 随机变量网格

javascript - 如何使用 Chart.js 设置工具提示标题的默认回调

javascript - iframe 相当于窗口吗？

javascript - Trig/javascript 计算在不裁剪的情况下适应图像旋转所需的填充

Jquery - 使用列表焦点上的箭头键禁用窗口滚动

javascript - 使用 jQuery 根据鼠标位置移动 div 背景

©2024 IT工具网  联系我们