Question

我想缩短我的jQuery代码。你觉得有可能吗？

之后我想获得一个功能，让我的内容从我的页面侧面飞出。你能帮帮我吗？

＆＃13;

$(document).ready(function() {
  $("#portfolio").click(function() {
    $("#stage").load("pages/portfolio.html");
  });
  $("#biografie").click(function() {
    $("#stage").load("pages/biografie.html");
  });
  $("#kontakt").click(function() {
    $("#stage").load("pages/kontakt.html");
  });
  $("#leistungen").click(function() {
    $("#stage").load("pages/leistungen.html");
  });
  $("#impressum").click(function() {
    $("#stage").load("pages/impressum.html");
  });
  $("#datenschutz").click(function() {
    $("#stage").load("pages/datenschutz.html");
  });
});

＆＃13;

<nav id="navibar">
  <ul>
    <li><a href="#portfolio" id="portfolio">Portfolio</a>
    </li>
    <li><a href="#biografie" id="biografie">Biografie</a>
    </li>
    <li><a href="#kontakt" id="kontakt">Kontakt</a>
    </li>
    <li><a href="#leistungen" id="leistungen">Leistungen</a>
    </li>
  </ul>
</nav>

＆＃13;

Answer 1

事件处理程序的

this值是指被点击的元素。您可以使用id：

简单地使用clicked元素的this.id属性

$('#navibar a').on('click', function() {
   $("#stage").load("pages/" + this.id + ".html");
});

Answer 2

首先，将选择器更改为

$(document).ready(
  function() {
    $("[data-url]")
        .click(function() {
            $("#stage").load($(this).attr('data-url'));
         });
});

然后将自定义属性添加到您的锚元素，如

    <li><a href="#portfolio" id="portfolio" data-load="pages/portfolio.html">Portfolio</a>
    </li>
    <li><a href="#biografie" id="biografie"  data-load=" data-load="pages/portfolio.html"">Biografie</a>
    </li>
    <li><a href="#kontakt" id="kontakt"  data-load="pages/kontakt.html">Kontakt</a>
    </li>
    <li><a href="#leistungen" id="leistungen"  data-load="pages/leistungen.html">Leistungen</a>
    </li>

如果路径始终基于id，则只需执行

即可

$(document).ready(
      function() {
        $("#navbar a")
            .click(function() {
                $("#stage").load('pages/' + $(this).attr('id') + '.html');
             });
    });

Answer 3

我会这样做：

的jQuery

$(document).ready(function() {
  $(".fly").click(function() {
    $("#stage").load("pages/"+$(this).attr("id")+".html");
  });
});

HMTL

<nav id="navibar">
  <ul>
    <li><a href="#portfolio" id="portfolio" class="fly">Portfolio</a>
    </li>
    <li><a href="#biografie" id="biografie" class="fly">Biografie</a>
    </li>
    <li><a href="#kontakt" id="kontakt" class="fly">Kontakt</a>
    </li>
    <li><a href="#leistungen" id="leistungen" class="fly">Leistungen</a>
    </li>
  </ul>
</nav>

Answer 4

<nav id="navibar">
  <ul>
    <li><a href="#portfolio" id="portfolio" class="loadable" data-load="pages/portfolio.html">Portfolio</a>
    </li>
    <li><a href="#biografie" id="biografie" class="loadable" data-load="pages/biografie.html">Biografie</a>
    </li>
    <li><a href="#kontakt" id="kontakt" class="loadable" data-load="pages/kontakt.html">Kontakt</a>
    </li>
    <li><a href="#leistungen" id="leistungen" class="loadable" data-load="pages/leistungen.html">Leistungen</a>
    </li>
  </ul>
</nav>

$(document).ready(function() {
    var $stage = $("#stage");

    $('#navibar').on('click', '.loadable', function(){
        $stage.load( $(this).data('load') );
    });
});

与上述答案类似。

Answer 5

HTML：

<nav id="navibar">
 <ul>
   <li><a href="#portfolio" id="portfolio" class="link">Portfolio</a>
   </li>
   <li><a href="#biografie" id="biografie" class="link">Biografie</a>
   </li>
   <li><a href="#kontakt" id="kontakt" class="link">Kontakt</a>
   </li>
   <li><a href="#leistungen" id="leistungen" class="link">Leistungen</a>
   </li>
 </ul>
</nav>

Jquery的：

$(function(){
  $(".link").click(function(e){
    event.preventDefault();
    var page = $(this).attr('id');
    $("#stage").load("pages/"+page+".html");
  });
});

工作小提琴：https://jsfiddle.net/h7yvgk3j/

Answer 6

您需要更改HTML和Javascript代码。

    <nav id="navibar">
  <ul>
    <li><a href="#portfolio" id="portfolio" class="nav-item" nav-url="pages/portfolio.html">Portfolio</a>
    </li>
    <li><a href="#biografie" id="biografie" class="nav-item" nav-url="pages/biografie.html">Biografie</a>
    </li>
    <li><a href="#kontakt" id="kontakt" class="nav-item" nav-url="pages/kontakt.html">Kontakt</a>
    </li>
    <li><a href="#leistungen" id="leistungen" class="nav-item" nav-url="pages/leistungen.html">Leistungen</a>
    </li>
  </ul>
</nav>

$(document).ready(function() {
  $(".nav-item").click(function() {
     var myUrl = this.getAttribute('nav-url');
      $(".stage").html(myUrl);
     // load corresponding url
     //$("#stage").load(myUrl);
  });
   
});

working code in fiddle

缩短守则？

6 个答案:

工作小提琴：https://jsfiddle.net/h7yvgk3j/