3
적절한 링크를 클릭하면 div를 표시하거나 숨기는 jquery 콘텐츠 전환기가 있습니다. 각 Divs 내부에는 FlexSlider가 있습니다. 첫 번째 플렉스 슬라이더는 잘 작동하지만 링크를 클릭하여 다른 Div를 표시하면 플렉스 슬라이더가 엉망이되어 한 번에 3 개의 슬라이드를 모두 표시합니다. 브라우저 창을 디 포커스하고 다시 초점을 맞추는 경우 (바탕 화면을 클릭하여 창 초점을 해제 한 다음 다시 초점을 맞추기 위해 창을 클릭하면) 플렉스 슬라이더가 제대로 작동합니다. 설명하는 것이 문제이지만, 실제로 그것을 보는 것이 가장 좋습니다. 사이트는 다음과 같습니다 : http://www.benhenschel.comjquery 내의 여러 FlexSlider가 콘텐츠 스위처를 숨기거나 표시합니다.
"Web"은 잘 동작하는 첫 번째 슬라이더지만, "모바일"을 클릭하면 두 번째 플렉스 슬라이더가 나타나고 한 번에 3 개의 슬라이드를 모두 볼 수 있습니다. 브라우저 창을 디 포커스하고 초점을 다시 맞추면 플렉스 슬라이더가 올바르게 표시됩니다. 여기
그래서 어떤 도움이 것, 가정말 jQuery를에 대해 잘 모르는 HTML
<!-- Web -->
<div id="webContainer" class="workContent flexslider">
<h3>Web</h3>
<ul class="slides">
<!-- Slide 1 -->
<li>
<div class="workImage">
<img src="/images/work/urbanSurvivorWeb.jpg" alt="" />
</div>
<div class="workDescription">
<h4>Urban Survivor</h4>
<p>
The goal of this project, was to create a teaser page for a iPhone app called Urban Survivor. This simple one page site was designed to introduce the app, and generate interest. By providing a email sign up that interest can be measured.
<br /><br />
<a href="http://www.urbansurvivorapp.com">Visit Site</a>
</p>
</div>
</li>
<!-- Slide 2 -->
<li>
<div class="workImage">
<img src="/images/work/taykey.jpg" alt="" />
</div>
<div class="workDescription">
<h4>Taykey</h4>
<p>
I was tasked with redesigning Taykey's website, the goal was to better communicate what Taykey had to offer, and how Taykey works. Additionally, provide general information about the company, jobs available as well as contact information for the various offices. The redesign also aimed at brining a more concise visual brand across other Taykey marketing material.
<br /><br />
<a href="http://www.taykey.com">Visit Site</a>
</p>
</div>
</li>
<!-- Slide 3 -->
<li>
<div class="workImage">
<img src="/images/work/ireland.jpg" alt="" />
</div>
<div class="workDescription">
<h4>I'm Off To Ireland</h4>
<p>
This was a personal website I created so I could share my experiences while studying abroad in Waterford, Ireland.
<br /><br />
<a href="http://www.imofftoireland.com">Visit Site</a>
</p>
</div>
</li>
</ul>
</div>
<!-- END Web -->
<!-- Mobile -->
<div id="mobileContainer" class="workContent flexslider">
<h3>Mobile</h3>
<ul class="slides">
<!-- Slide 1 -->
<li>
<div class="workImage">
<img src="/images/work/urbanSurvivor/app.png" alt="" />
</div>
<div class="workDescription">
<h4>Urban Survivor iPhone App</h4>
<p>
Urban Survivor alerts the user when they have physically entered an area with a high crime rating. Additionally, the user will be able to check the threat level of their current physical location and see a broader view of their surroundings through the use of a heat map. Both the threat meter and the heat map use a simple, color-coded visual cue (green = low, yellow = neutral, red = high). Finally, there is a panic button dials 911 when pressed.
</p>
</div>
</li>
<!-- Slide 2 -->
<li>
<div class="workImage">
<img src="/images/work/urbanSurvivor/wireframe.jpg" alt="" />
</div>
<div class="workDescription">
<h4>Urban Survivor App: Wireframe</h4>
<p>
A major requirement for this app was a super simple navigation. After several iterations we landed on having two buttons in the top left and right hand corner of the screen that, when taped, would swipe left/right reveling the content of the new screen. As an alternate to this navigation, the user would swipe left or right with their fingers to also revel the content.
</p>
</div>
</li>
<!-- Slide 3 -->
<li>
<div class="workImage">
<img src="/images/work/urbanSurvivor/workflow.jpg" alt="" />
</div>
<div class="workDescription">
<h4>Urban Survivor App: User Workflow</h4>
<p>
This flowchart shows the entire user workflow, and how the user could interact with the app.
</p>
</div>
</li>
</ul>
</div>
<!-- END Mobile -->
<!--Hide/Show-->
<script type="text/javascript" charset="utf-8">
$(function(){
function contentSwitcher(settings){
var settings = {
contentClass : '.workContent',
navigationId : '#navigation'
};
//Hide all of the content except the first one on the nav
$(settings.contentClass).not(':first').hide();
$(settings.navigationId).find('li:first').addClass('active');
//onClick set the active state,
//hide the content panels and show the correct one
$(settings.navigationId).find('a').click(function(e){
var contentToShow = $(this).attr('href');
contentToShow = $(contentToShow);
//dissable normal link behaviour
e.preventDefault();
//set the proper active class for active state css
$(settings.navigationId).find('li').removeClass('active');
$(this).parent('li').addClass('active');
//hide the old content and show the new
$(settings.contentClass).hide();
contentToShow.show();
});
}
contentSwitcher();
});
</script>
<!--Flex Slider-->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
에 대한 코드입니다 대단히 감사하겠습니다.