css配合jquery美化 select_jquery

一個簡單的css搭配jq美化select
 

複製程式碼

複製程式碼

程式碼🎜>

請選擇…
1
2
3

section>

複製程式碼

程式碼如下:

<script> <BR>$(document).ready(function() { <BR>$('#basic-usage-demo').fancySelect(); <br><br>// Boilerplate <BR>var repoName = 'fancyselect' <br><br>$.get('' repoName, function(repo) { <BR>var el = $('#top').find('.repo'); <br><br>el.find('.stars').text(repo.watchers_count); <BR>el.find('.forks').text(repo.forks_count); <BR>}); <br> <br>var menu = $('#top').find('menu'); <br><br>function positionMenuArrow() { <BR>var current = menu.find('.current'); <br><br>menu.find('.arrow').css('left', current.offset().left (current.outerWidth() / 2)); <BR>} <br><br>$( window).on('resize', positionMenuArrow); <br><br>menu.on('click', 'a', function(e) { <BR>var el = $(this), <BR>href = el.attr('href'), <BR>currentSection = $('#main').find('.current'); <br><br>e.preventDefault(); <br><br>menu .find('.current').removeClass('current'); <br><br>el.addClass('current'); <br><br>positionMenuArrow(); <br><br>if (currentSection .length) { <BR>currentSection.fadeOut(300).promise().done(function() { <BR>$(href).addClass('current').fadeIn(300); <BR>}); <BR>} else { <BR>$(href).addClass('current').fadeIn(300); <BR>} <BR>}); <br><br>menu.find('a:first}); <BR><BR>menu.find('a:first ').trigger('click') <BR>}); </script>

複製代碼

程式碼如下: