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脚本：

＆＃13;

$(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());
              
			}
        });
         
                          
	});

＆＃13;

<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>

＆＃13;

Answer 2

我对PHP知之甚少，但我知道jQuery可以链接方法，试试这个：

$('#tabs').tabs(function(event) { 
     fx: { opacity: 'toggle', duration: 'slow'};
     $(this).find('a').bind('click', function(event) { 
            var link = $(this).attr('href');
                    $(window).load(link);
      });
      event.stopPropagation();
 });

我确定有些东西不对......

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

2 个答案: