Question

我正在尝试制作标签并使用easytabs。通过以下代码，第二个选项是默认选择的选项卡。

我希望将第一个标签选为活动标签。我以前做过，但不幸的是我错过了文件。现在我正在努力再做一次。请告诉我如何首先选择第一个选项卡（统计信息）作为默认选项卡。现在第二个选项卡（后续）是默认选择的选项卡。

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
    <head profile="http://gmpg.org/xfn/11"> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <script src="js/ajax_request.js" type="text/javascript"></script> 

        <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> 
        <script src="js/jquery.hashchange.min.js" type="text/javascript"></script>
        <script src="js/jquery.easytabs.min.js" type="text/javascript"></script>

<script src="js/jquery.maskedinput.js" type="text/javascript" charset="utf-8"></script>
        <style> 
            #tab-container { border: solid 0px; height: auto; }
            #tab-container ul { margin: 0; padding: 0; }
            #tab-container ul li { display: inline-block; background:#464646 ; border:  1px; border-bottom: none; font-color:#000000;}
            #tab-container ul li a { display: block; padding: 5px; outline: none; }
            #tab-container ul li a:hover { text-decoration: none;background-color:#30A4B1; }
            #tab-container ul li.active-tab {   padding-top: 6px; position: relative; top: 1px; font-color:#000000; }
            #tab-container ul li a.active-tab { font-weight: bold;position:relative; }
            #tab-container .panel { border: ; padding: 0 10px; }
            #tab-container ul li a.active { background-color:#30A4B1; color:#ffffff; }

        </style>
        <script type="text/javascript"> 
          $(document).ready(function(){ $('#tab-container').easytabs({
            updateHash: false,
            tabActiveClass:'active',


          }); });
</script>         
    </head>
<body>
        <div id="tab-container"  >
        <ul style="float:right;">
        <li><a href="" data-target="#tab2">Statistics
    </a>        
        </li>           
        <li><a href="" data-target="#that-other-tab">Followup
                <span class="notification-bubble" title="Notifications" style="background-color: rgb(239, 51, 14); display: inline;" id="countOrder"><?php echo $countOrder;?></span>           
        </a>        
        </li>       
        <li><a href="" data-target="#pay-tab" class="tabs">Payment</a></li>
           </ul><br/><br/><hr/>

        <div class="panel-container">
        <div id="tab2">
            <iframe src="charts/chart_main.php" width="100%" height="1000px" scrolling="no" style="border:0px; margin:0px;">
                </iframe>
                </div>

            <div id="that-other-tab">
            <iframe src="followup/follow_grid.php" width="100%" height="500px" scrolling="no" style="border:0px; margin:0px;">
                </iframe>
                </div>
                                <div id="pay-tab">
            <iframe src="pay_grid.php" width="100%" height="500px" scrolling="no" style="border:0px; margin:0px;">
                </iframe>
                </div>      
          </div>
        </div>
    </body>
</html>

Answer 1

您有许多不同的类，但从它的外观来看，您可以从第二个选项卡中删除active类，然后将active类添加到第一个选项卡。简单的东西:)

希望这会有所帮助。

编辑 -

我想我刚刚在这个插件中找到了一些东西。即使刷新页面，您希望它在第一个选项卡上，对吗？如果是这样，您只需将updateHash设置转为false即可。用以下内容替换当前的<script>：

<script type="text/javascript"> 
$(document).ready(function() {
    $('#tab-container').easytabs({
        animate: false,
        tabActiveClass: 'active',
        updateHash: false
    });
});
</script>

我希望这有帮助！

如何在EasyTabs中停止自动选择第二个选项卡？

1 个答案:

编辑 -