1
我用一個簡單的jQuery函數來顯示/這取決於被點擊鏈接更改div的內容..jQuery的節目內容時,點擊開始隱藏
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function() {
jQuery(this).addClass('selected').siblings().removeClass('selected');
jQuery('.targetDiv').hide();
jQuery('#div' + jQuery(this).data('target')).show();
});
});
.col-md-4{width:200px;background:red;clear:both;margin-bottom:10px;}
.p_content{clear:both;margin-top:300px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
<div class="p_link">
<a class="showSingle" data-target="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis orci id nulla aliquet fermentum. Suspendisse ultrices nulla id magna cursus blandit.
</a>
</div>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="2">
Sed feugiat fringilla lacus, quis aliquam turpis cursus eu. In dignissim ultrices tellus in convallis. Sed euismod tellus vel lorem
</a>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="3">
suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris
</a>
</div>
<div class="col-md-4">
<div class="p_link">
<a class="showSingle" data-target="4">
ique sodales mi mi quis leo. Aliquam at eros vitae sem accumsan maximus. In non sapien faucibus, accumsan nisl eget, convallis
</a>
</div>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="5">
vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus.
</a>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="6">
fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis
</a>
</div>
<div class="container p_content">
<div id="div1" class="targetDiv">
posuere dapibus. In blandit, tortor quis laoreet lobortis, sem est auctor eros, ut vulputate augue felis nec massa. Pellentesque sagittis mi ac leo dignissim, sed semper augue hendrerit. Quisque scelerisque ante quis ullamcorper placerat. Cras in porta turpis. Proin turpis mi, posuere vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit am
</div>
<div id="div2" class="targetDiv">
idunt ante, eget pulvinar magna malesuada id. Morbi posuere libero sed ante tempor faucibus. Fusce non nulla nunc. Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et
</div>
<div id="div3" class="targetDiv">
erisque erat vel vehicula. In varius at massa id molestie. Donec nec nisi vel justo auctor laoreet. Ut commodo velit vitae magna faucibus elementum. Cras ultrices auctor risus, scelerisque aliquet nisi tincidunt id. Integer quis dapibus nibh. Praesent mauris eros, vestibulum at felis a, luctus laoreet tellus.
</div>
<div id="div4" class="targetDiv">
e vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit amet sodales urna
</div>
<div id="div5" class="targetDiv">
gnissim ultrices tellus in convallis. Sed euismod tellus vel lorem suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris. Aenean quis maximus ex. Maecenas congue tellus ac nunc sodales pellentesque.
</div>
<div id="div6" class="targetDiv">
Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis nisi id cursus. Nunc ac turpis sem. In pellentesque rhoncus suscipit.
</div>
</div>
http://jsfiddle.net/W4Km8/7939/
除了兩件事情之外,所有工作都正常:
- 第一次加載時,會顯示所有內容,直到單擊其中一個選項。
- 我想這樣做,當其中一個鏈接被點擊時,頁面跳轉到它的內容。
有沒有人能指出我爲了實現這兩件事而朝正確的方向發展?
謝謝,這很有效 – fightstarr20