i cant redirect and go to a specific section
<p>i am trying to redirect to this page and go a specific part of the page, which is powered by java script to move around. i want to be able to go to  say, delete section. but i cant achieve it using localhost/entry.php#delete . what am i doing wrong?  below is the snippet.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(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);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;

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

      &lt;/div&gt;
      &lt;div id="update" class="form-action hide"&gt;
        &lt;h1&gt;Update&lt;/h1&gt;
        &lt;p&gt;
          update data goes here
        &lt;/p&gt;

      &lt;/div&gt;

      &lt;div id="delete" class="form-action hide"&gt;
        &lt;h1&gt;Delete&lt;/h1&gt;
        &lt;p&gt;
          delete data goes here
        &lt;/p&gt;

      &lt;/div&gt;

    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>