javascript - 切换不透明度并重新加载 div

Question

我的页面上有一个选项卡式系统。当前，当单击时，不透明度会切换以显示该 div 使用:

$('.tabs').tabs({ fx: { opacity: 'toggle', duration: 'slow'} });

在页面头部的 javascript 中加载。我试图添加一个点击事件处理程序，以便 div 也被重新加载，但它没有任何效果，我怎样才能让它同时执行这两项操作？

<div class="tabs">
         <ul>
        <li><a href="#tabs-0">Time Sheets</a></li>
        <li><a href="#tabs-1">Abscence Request</a></li>
         <li><a href="#tabs-2">Abscence Record</a></li>
      </ul>
      <div class="clear"></div>
      <div class="bordered_box">
        <div id="tabs-0"><?php include('timesheets.php'); ?></div>        
        <div id="tabs-1"><?php include('abscencerequestform.php'); ?></div></div>
        <div id="tabs-2"><?php include('abscencerecords.php'); ?></div>
        </div>
     <script type="text/javascript">
    $(function () {
        $("a#tabs-0").on("click", function () {
            $("#tabs-0").load("timesheets.php");
        });
        $("a#tabs-1").on("click", function () {
            $("#atabs-1").load("abscencerequests.php");
        });
         $("a#tabs-2").on("click", function () {
            $("#atabs-2").load("abscencerecords.php");
        });
    });
    </script>

Answer 1

如果我没理解错的话，您想在选择每个选项卡时重新加载选项卡内容吗？

只需将您的选项卡直接指向 PHP 内容，每次单击特定页面的选项卡时都会强制加载它。 JQuery 将为您构建面板，因此您只需要下面的代码而不是 <div class="bordered_box"> 的内容:

<div id="tabs">
    <ul>
        <li><a href="timesheets.php">Time Sheets</a></li>
        <li><a href="abscencerequests.php">Abscence Request</a></li>
        <li><a href="abscencerecords.php">Abscence Record</a></li>
    </ul>
</div>

这只是一个模拟示例，因为我无法在此处加载事件的 PHP 脚本:

$(function() {
      
		$( "#tabs" ).tabs({ 
            fx: { opacity: 'toggle', duration: 'slow'},
		    activate: function(event ,ui){
		        //console.log(event);
			    alert("Simulating refreshed PHP content in Tab #" + ui.newTab.index());
              
			}
        });
         
                          
	});

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="tabs">
	<ul>
		<li><a href="timesheets.php">Time Sheets</a></li>
		<li><a href="abscencerequests.php">Abscence Request</a></li>
		<li><a href="abscencerecords.php">Abscence Record</a></li>
	</ul>
</div>