簡體   English   中英

通過GET URL加載Bootstrap nav nav-tabs

[英]Load Bootstrap nav nav-tabs via GET URL

我已經通過索引頁面設置了Bootstraps導航選項卡。 每個選項卡通過AJAX加載單獨的PHP文件:

<div class="container">
    <ul class="nav nav-tabs" id="indextabs">
        <li><a href="notes.php" data-target="#notes" data-toggle="tabchange">NOTES</a></li>
        <li><a href="whois.php" data-target="#whois" data-toggle="tabchange">WHOIS</a></li>
        <li><a href="dig.php" data-target="#dig" data-toggle="tabchange">DIG</a></li>
        <li><a href="ets.php" data-target="#ets" data-toggle="tabchange">ETS</a></li>
        <li><a href="resources.php" data-target="#resources" data-toggle="tabchange">RESOURCES</a></li>
    </ul>
</div>

處理AJAX查詢的JavaScript:

window.onload = function() {
$('[data-toggle="tabchange"]').click(function(e) {
var $this = $(this),
    loadurl = $this.attr('href'),
    targ = $this.attr('data-target');

$.get(loadurl, function(data) {
    $(targ).html(data);
});

$this.tab('show');
return false;
});
}

這本身工作正常。 但是,在某些選項卡中,有一個輸入需要一個域名,然后需要通過GET請求提交該域名,以便該URL可以是:

http://domain.com/?domain=google.com&record=mx

考慮到這一點,我有兩個問題:

  1. 如何使用GET方法URL加載特定選項卡?
  2. 如何使用GET方法通過AJAX提交表單數據,並更改URL並將其內容加載到選項卡面板div中?

請考慮將以下內容視為評論,因為我不確定哪種情況最適合您(並且也可以)。 無論如何,我認為您需要在$ get方法調用中以對象,鍵值對{ domain: 'google.com', record: 'mx'}或字符串的形式傳遞查詢參數。 在下面使用對象/鍵值對。

window.onload = function() {
$('[data-toggle="tabchange"]').click(function(e) {

var $this = $(this),
  loadurl = $this.attr('href'),
  targ = $this.attr('data-target');

//optional method call below, uncomment if needed
//loadurl = getDomainURL() + "/" + loadurl


  $.get(loadurl, {
     domain: 'google.com',
     record: 'mx'
    }, 
    function(data) {
    $(targ).html(data);
  });

  $this.tab('show');
  return false;
 });
}


//returns domain name: www.example.com in form of http://example.com
// or domain name: http://example.com is returned as it is, unchanged http://example.com
function getDomainURL() {

  var index = window.location.hostname.indexOf("www.");

  if (index === 0)
    return "http://" + window.location.hostname.substr((index + 4));
  else
    return "http://" + window.location.hostname;

}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM