머 XE가 기본적으로 jQuery 를 로딩하니...

 

넣고자 하는 곳에서...

 

자바소스와...

 

몇가지 양식에 맞는 태그를 사용하면 되겠다.

 

 

<script type="text/javascript">
jQuery(function(){
 jQuery( "#tabs" ).tabs();
});
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">슬로건</a></li>
        <li><a href="#tabs-2">영상</a></li>
        <li><a href="#tabs-3">홍보대사</a></li>
    </ul>
    <div id="tabs-1">
        <div>슬로건</div>
    </div>
    <div id="tabs-2">
        <div>영상</div>
    </div>
    <div id="tabs-3">
        <div>홍보대사</div>
    </div>
</div>

 

 

마우오버 이벤트를 추가하면... 클릭하지 않아도 탭이 바로 여

jQuery(function(){

$( "#tabs" ).tabs({
	event: "mouseover"
	});

});

아래 명령어를 추가하면... 탭 내용이 닫혔다. 열렸다 합니다^^

collapsible: true

Ajax 처리는 아래처럼 하시면 됩니다

<script>

$(function() {

$( "#tabs" ).tabs({

ajaxOptions: {

error: function( xhr, status, index, anchor ) {

$( anchor.hash ).html(

"Couldn't load this tab. We'll try to fix this as soon as possible. " +

"If this wouldn't be a demo." );

}

}

});

});

</script>

<div id="tabs">

<ul>

<li><a href="#tabs-1">Preloaded</a></li>

<li><a href="ajax/content1.html">Tab 1</a></li>

<li><a href="ajax/content2.html">Tab 2</a></li>

<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>

<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>

</ul>

<div id="tabs-1">

<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

</div>

</div>