我們如何使用jquery默認打開一個選項卡？

Question

在這段代碼中，我想默認打開一個選項卡。現在，當我點擊任何標籤，如客戶中心方法相關的數據將打開但我希望至少有一個選項卡默認打開那麼，我該怎麼做呢？

jQuery(function() { 
 
    jQuery('.showSingle').click(function() { 
 
    jQuery('.targetDiv').slideUp(); 
 
    jQuery('.targetDiv').hide(); 
 
    jQuery('#div' + $(this).attr('target')).slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav nav-tabs nav-stacked"> 
 
    <li><a class="showSingle" target="1">Customer Centric Approach</a></li> 
 
    <li><a class="showSingle" target="2">Process Oriented Approach</a></li> 
 
</ul> 
 
<div id="div1" class="targetDiv"> 
 
    <div class="col-md-8"> 
 
    <p>Hello</p> 
 
    </div> 
 
    <div class="col-md-4" style="margin-top: 25px;"> 
 
    <img src="images/why/customer.jpg" alt "" /> 
 
    </div> 
 
</div> 
 
<div id="div2" class="targetDiv"> 
 
    <div class="col-md-8"> 
 
    <p>WORLD</p> 
 
    </div> 
 
    <div class="col-md-4" style="margin-top: 25px;"> 
 
    <img src="images/why/process.png" alt "" /> 
 
    </div> 
 
</div>

Answer 1

像這樣

jQuery(function() { 
 
    jQuery('.showSingle').click(function() { 
 
    jQuery('.targetDiv').slideUp(); 
 
    jQuery('.targetDiv').hide(); 
 
    jQuery('#div' + $(this).attr('target')).slideToggle(); 
 
    }).eq(0).click(); // click the first (or one passed in HASH if needed) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav nav-tabs nav-stacked"> 
 
    <li><a class="showSingle" target="1">Customer Centric Approach</a></li> 
 
    <li><a class="showSingle" target="2">Process Oriented Approach</a></li> 
 
</ul> 
 
<div id="div1" class="targetDiv"> 
 
    <div class="col-md-8"> 
 
    <p>Hello</p> 
 
    </div> 
 
    <div class="col-md-4" style="margin-top: 25px;"> 
 
    <img src="images/why/customer.jpg" alt "" /> 
 
    </div> 
 
</div> 
 
<div id="div2" class="targetDiv"> 
 
    <div class="col-md-8"> 
 
    <p>WORLD</p> 
 
    </div> 
 
    <div class="col-md-4" style="margin-top: 25px;"> 
 
    <img src="images/why/process.png" alt "" /> 
 
    </div> 
 
</div>