使用Jquery增加选项卡

Increment Tabs using Jquery

本文关键字：选项 增加 Jquery 使用      更新时间：2023-09-26

我正在foreach中使用选项卡，这是我的代码：

foreach ($pdts as $pdt=>$r){
    echo'<tr>';
        echo'
        <td><div style="width: 10px;"><span id="plus-'.$pdt.'"> + </span><br/>

            </div></td>
        <td><div style="width:200px; text-align:center">'.$r['Product_Number'].'</div></td>
        <td><div  style="width:200px; text-align:center">'.$r['Barcode'].'</div></td>
        <td><div  style="width:150px; text-align:center">'.$r['Product_Name'].'</div></td>
        <td><div  style="width:200px; text-align:center">'.$r['Supplier_Number'].'</div></td>
        <td><div  style="width:200px; text-align:center">'.$r['Stock_Number'].'</div></td>';
        $sql_stk="SELECT Stock_Name FROM stock where Stock_Number='".$r['Stock_Number']."'";
        $stks = db_query($database_name, $sql_stk);
        //var_dump($stks );
            foreach ($stks as $stk=>$s){
                echo'   <td style="text-align:center; width:120px; ">'.$s['Stock_Name'].'</td>';
            }
        echo'<td style="text-align:center; width:120px; ">'.$r['Purchasing_Price'].'</td>
        <td style="text-align:center; width:120px; ">'.$r['Selling_Price'].'</td>
        <td style="text-align:center; width:120px; ">'.$r['Quantity'].'</td>';
         echo'</tr>
         <tr><td colspan="10"><div id="detail-'.$pdt.'" >
         <div id="tabs-'.$pdt.'">
              <ul>
                <li><a href="#tabs-1">Sales Detail</a></li>
                <li><a href="#tabs-2">Purchases Detail</a></li>
              </ul>
              <div id="tabs-1">
                <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. </p>
              </div>
              <div id="tabs-2">
                <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus,</p>
              </div>
        </div>
    </div>';
}

因此，对于每种产品，我都有一个特定的选项卡，其中包含有关该产品的信息。

 <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

如何使用Jquery调用每个产品的每个选项卡
感谢您的帮助

我找到了解决方案：

<script>
$(document).ready(function() 
{
	 $('[id^="detail-"]').hide();
	  
				$('[id^="plus-"]').click(function() {
					alert('ALLAH');
					  var id = $(this).attr('id');
					 
					   var idx=id.substring(id.lastIndexOf("-"));
					    
						$("#detail"+idx).toggle(500); 
						$( "#tab"+idx ).tabs();						
				});
			});
			</script>

和：

<div id="tab-'.$pdt.'">
              <ul>
                <li><a href="#tabs-1">Sales Detail</a></li>
                <li><a href="#tabs-2">Purchases Detail</a></li>
              </ul>
相关文章：