如何在选项卡中实现没有可见href的jquery ajax选项卡

Question

我已经成功地为我的页面实现了一个ajax标签系统，并且它正常工作。

我面临的问题是，当用户将鼠标悬停在标签上时，href的网址是可见的，如果他右键单击并在新标签页中打开，则会打开包含的php文件。

我想要隐藏我的tab hrefs的url以便隐藏，并且这些文件在直接访问时也不应该执行。任何大师都可以帮忙吗

我的代码如下：

<div class="col-md-12">

<ul class="nav nav-tabs tabs-up" id="friends">
    <li class="active">
        <a href="#internal" data-toggle="tabajax">Internal Readings</a>
    </li>

    <li>
        <a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/1.php?var='.$var ?>" data-target="#qr" class="media_node span" id="qr_tab" data-toggle="tabajax" rel="tooltip">Results</a>
    </li>
    <li>
        <a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/2.php?var='.$var ?>" data-target="#kfr" class="media_node span" id="kfr_tab" data-toggle="tabajax" rel="tooltip">Ratios</a>
    </li>
    <li>
        <a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/3.php?var='.$var ?>" data-target="#pl" class="media_node span" id="pl_tab" data-toggle="tabajax" rel="tooltip">PL</a>
    </li>
    <li>
        <a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/4.php?var='.$var ?>" data-target="#bs" class="media_node span" id="bl_tab" data-toggle="tabajax" rel="tooltip">Balance</a>
    </li>
    <li>
        <a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/5.php?var='.$var ?>" data-target="#cf" class="media_node span" id="cf_tab" data-toggle="tabajax" rel="tooltip">Flow</a>
    </li>
    <li>
        <a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/8.php?var='.$var ?>" data-target="#mf" class="media_node span" id="mf_tab" data-toggle="tabajax" rel="tooltip">Holdings</a>
    </li>
    <li>
        <a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/9.php?var='.$var ?>" data-target="#info" class="media_node span" id="info_tab" data-toggle="tabajax" rel="tooltip">Info</a>
    </li>
</ul>

<div class="tab-content">
    <div id="wait" style="display:none;position:absolute;top:30px;left:50%;padding:2px;margin-top:100px;">
        <img src="./images/loading_m.gif" width="64" height="64" /><br>Loading..
    </div>
    <div class="tab-pane active" id="internal">

        <div class="row">
            <div>
                <canvas  id="Charts"></canvas>
            </div>
        </div>
    </div>

    <div class="tab-pane" id="qr">
    </div>
    <div class="tab-pane" id="kfr">
    </div>
    <div class="tab-pane" id="pl">
    </div>
    <div class="tab-pane" id="bs">
    </div>
    <div class="tab-pane" id="cf">
    </div>
    <div class="tab-pane" id="mf">
    </div>
    <div class="tab-pane" id="info">
    </div>
</div>      

并且页面中的js如下所示

<script>
jQuery('[data-toggle="tabajax"]').click(function(e) {
var $this = jQuery(this),
    loadurl = $this.attr('href'),
    targ = $this.attr('data-target');

jQuery.get(loadurl, function(data) {

    jQuery(targ).html(data);
});

$this.tab('show');
return false;
});
</script>

和

<script>
jQuery(document).ready(function(){
jQuery(document).ajaxStart(function(){
jQuery("#wait").css("display", "inline");
});
jQuery(document).ajaxComplete(function(){
jQuery("#wait").css("display", "none");
});
});
</script>

要禁用对文件的直接访问，我尝试使用：

if(!isset($_SERVER['HTTP_REFERER'])){
// redirect them to your desired location 
header('location:../index.php'); 
exit; 
} 

但是根据它没有效果，也尝试过tracedebug，但它不允许加载标签，所以寻找其他方法。

jQuery('[data-toggle="tabajax"]').click(function(e) {
    var $this = jQuery(this),
        loadurl = $this.attr('href'),
        targ = $this.attr('data-target');
	
    jQuery.get(loadurl, function(data) {
		
        jQuery(targ).html(data);
    });
	
    $this.tab('show');
    return false;
	});
  
  jQuery(document).ready(function(){
    jQuery(document).ajaxStart(function(){
        jQuery("#wait").css("display", "inline");
    });
    jQuery(document).ajaxComplete(function(){
        jQuery("#wait").css("display", "none");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-md-12">
		
	<ul class="nav nav-tabs tabs-up" id="friends">
		<li class="active">
			<a href="#internal" data-toggle="tabajax">Tab1</a>
		</li>
		
		<li>
			<a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/1.php?var='.$var ?>" data-target="#qr" class="media_node span" id="qr_tab" data-toggle="tabajax" rel="tooltip">Tab2</a>
		</li>
		<li>
			<a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/2.php?var='.$var ?>" data-target="#kfr" class="media_node span" id="kfr_tab" data-toggle="tabajax" rel="tooltip">Tab3</a>
		</li>
		<li>
			<a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/3.php?var='.$var ?>" data-target="#pl" class="media_node span" id="pl_tab" data-toggle="tabajax" rel="tooltip">Tab4</a>
		</li>
		<li>
			<a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/4.php?var='.$var ?>" data-target="#bs" class="media_node span" id="bl_tab" data-toggle="tabajax" rel="tooltip">Tab5</a>
		</li>
		<li>
			<a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/5.php?var='.$var ?>" data-target="#cf" class="media_node span" id="cf_tab" data-toggle="tabajax" rel="tooltip">Tab6</a>
		</li>
		<li>
			<a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/8.php?var='.$var ?>" data-target="#mf" class="media_node span" id="mf_tab" data-toggle="tabajax" rel="tooltip">Tab7</a>
		</li>
		<li>
			<a href="<?php echo $_SERVER['DOCUMENT_ROOT'] .'q2/9.php?var='.$var ?>" data-target="#info" class="media_node span" id="info_tab" data-toggle="tabajax" rel="tooltip">Tab8</a>
		</li>
	</ul>

	<div class="tab-content responsive">
		<div id="wait" style="display:none;position:absolute;top:30px;left:50%;padding:2px;margin-top:100px;">
			<img src="./images/loading_m.gif" width="64" height="64" /><br>Loading..
		</div>
		<div class="tab-pane active" id="internal">
			
			<div class="row">
				<div>
					<canvas  id="Charts"></canvas>
				</div>
			</div>
		</div>
		
		<div class="tab-pane" id="qr">
		</div>
		<div class="tab-pane" id="kfr">
		</div>
		<div class="tab-pane" id="pl">
		</div>
		<div class="tab-pane" id="bs">
		</div>
		<div class="tab-pane" id="cf">
		</div>
		<div class="tab-pane" id="mf">
		</div>
		<div class="tab-pane" id="info">
		</div>
	</div>		
</div>