Jquery滑塊加載每個標籤

我有問題與jquery選項卡和滑塊..我的問題是當單擊滑塊項目爲例如4的滑塊元素..它加載每個選項卡約4元素。我想讓我點擊一個滑塊的元素。它可以只加載活動選項卡。Jquery滑塊加載每個標籤

HTML

<title>jQuery UI Slider - Slider scrollbar</title> 
<body> 
    <div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> 
     <div class="scroll-content"> 
      <div class="scroll-content-item ui-widget-header"></div> 
      <div class="scroll-content-item ui-widget-header"> 
       <div class="arabadiv" onclick="yukle()" style="width:100px; height:100px; background-color: darkviolet "></div> 
      </div> 
      <div class="scroll-content-item ui-widget-header"> 
       <div style="width:100px; height:100px; background-color:red"></div> 
      </div> 
      <div class="scroll-content-item ui-widget-header">4</div> 
      <div class="scroll-content-item ui-widget-header">5</div> 
      <div class="scroll-content-item ui-widget-header">6</div> 
      <div class="scroll-content-item ui-widget-header">7</div> 
      <div class="scroll-content-item ui-widget-header">8</div> 
      <div class="scroll-content-item ui-widget-header">9</div> 
      <div class="scroll-content-item ui-widget-header">10</div> 
      <div class="scroll-content-item ui-widget-header">11</div> 
      <div class="scroll-content-item ui-widget-header">12</div> 
      <div class="scroll-content-item ui-widget-header">13</div> 
      <div class="scroll-content-item ui-widget-header">14</div> 
      <div class="scroll-content-item ui-widget-header">15</div> 
      <div class="scroll-content-item ui-widget-header">16</div> 
      <div class="scroll-content-item ui-widget-header">17</div> 
      <div class="scroll-content-item ui-widget-header">18</div> 
      <div class="scroll-content-item ui-widget-header">19</div> 
      <div class="scroll-content-item ui-widget-header">20</div> 
     </div> 
     <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> 
      <div class="scroll-bar"></div> 
     </div> 
    </div> 
    <div style="clear:left"></div> 
    <div id="tabs" class="tabs-bottom"> 
     <ul> 
      <li><a href="#tabs-1">Genel Bakış</a> 
      </li> 
      <li><a href="#tabs-2">Tasarım</a> 
      </li> 
      <li><a href="#tabs-3">Aksesuar</a> 
      </li> 
      <li><a href="#tabs-4">Model</a> 
      </li> 
      <li><a href="#tabs-5">Renk</a> 
      </li> 
      <li><a href="#tabs-6">Fiyat</a> 
      </li> 
     </ul> 
     <div class="tabs-spacer"></div> 
     <div style="width:auto; height:800px; background-color:red" id="tabs-1"></div> 
     <div style="width:auto; height:900px; background-color:yellowgreen" id="tabs-2"></div> 
     <div style="width:auto; height:800px; background-color:darkcyan" id="tabs-3"></div> 
     <div style="width:auto; height:800px; background-color:bisque" id="tabs-4"></div> 
     <div style="width:auto; height:800px; background-color:firebrick" id="tabs-5"></div> 
     <div style="width:auto; height:800px; background-color:ghostwhite" id="tabs-6"></div>

JAVA

$(function() { 
    $("#tabs").tabs(); 

    // fix the classes 
    $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *") 
     .removeClass("ui-corner-all ui-corner-top") 
     .addClass("ui-corner-bottom"); 

    // move the nav to the bottom 
    $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom"); 
}); 

$(function() { 
    //scrollpane parts 
    var scrollPane = $(".scroll-pane"), 
     scrollContent = $(".scroll-content"); 

    //build slider 
    var scrollbar = $(".scroll-bar").slider({ 
     slide: function (event, ui) { 
      if (scrollContent.width() > scrollPane.width()) { 
       scrollContent.css("margin-left", Math.round(
       ui.value/100 * (scrollPane.width() - scrollContent.width())) + "px"); 
      } else { 
       scrollContent.css("margin-left", 0); 
      } 
     } 
    }); 

    //append icon to handle 
    var handleHelper = scrollbar.find(".ui-slider-handle") 
     .mousedown(function() { 
     scrollbar.width(handleHelper.width()); 
    }) 
     .mouseup(function() { 
     scrollbar.width("100%"); 
    }) 
     .append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>") 
     .wrap("<div class='ui-handle-helper-parent'></div>").parent(); 

    //change overflow to hidden now that slider handles the scrolling 
    scrollPane.css("overflow", "hidden"); 

    //size scrollbar and handle proportionally to scroll distance 
    function sizeScrollbar() { 
     var remainder = scrollContent.width() - scrollPane.width(); 
     var proportion = remainder/scrollContent.width(); 
     var handleSize = scrollPane.width() - (proportion * scrollPane.width()); 
     scrollbar.find(".ui-slider-handle").css({ 
      width: handleSize, 
       "margin-left": -handleSize/2 
     }); 
     handleHelper.width("").width(scrollbar.width() - handleSize); 
    } 

    //reset slider value based on scroll content position 
    function resetValue() { 
     var remainder = scrollPane.width() - scrollContent.width(); 
     var leftVal = scrollContent.css("margin-left") === "auto" ? 0 : parseInt(scrollContent.css("margin-left")); 
     var percentage = Math.round(leftVal/remainder * 100); 
     scrollbar.slider("value", percentage); 
    } 

    //if the slider is 100% and window gets larger, reveal content 
    function reflowContent() { 
     var showing = scrollContent.width() + parseInt(scrollContent.css("margin-left"), 10); 
     var gap = scrollPane.width() - showing; 
     if (gap > 0) { 
      scrollContent.css("margin-left", parseInt(scrollContent.css("margin-left"), 10) + gap); 
     } 
    } 

    //change handle position on window resize 
    $(window).resize(function() { 
     resetValue(); 
     sizeScrollbar(); 
     reflowContent(); 
    }); 
    //init scrollbar size 
    setTimeout(sizeScrollbar, 10); //safari wants a timeout 
});

CSS

.scroll-pane { 
    overflow: auto; 
    width: 99%; 
    float:left; 
} 
.scroll-content { 
    width: 2440px; 
    float: left; 
} 
.scroll-content-item { 
    width: 100px; 
    height: 100px; 
    float: left; 
    margin: 10px; 
    font-size: 3em; 
    line-height: 96px; 
    text-align: center; 
} 
.scroll-bar-wrap { 
    clear: left; 
    padding: 0 4px 0 2px; 
    margin: 0 -1px -1px -1px; 
} 
.scroll-bar-wrap .ui-slider { 
    background: none; 
    border:0; 
    height: 2em; 
    margin: 0 auto; 
} 
.scroll-bar-wrap .ui-handle-helper-parent { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
} 
.scroll-bar-wrap .ui-slider-handle { 
    top:.2em; 
    height: 1.5em; 
} 
.scroll-bar-wrap .ui-slider-handle .ui-icon { 
    margin: -8px auto 0; 
    position: relative; 
    top: 50%; 
} 
/* force a height so the tabs don't jump as content height changes */ 
#tabs .tabs-spacer { 
    float: left; 
    height: 200px; 
} 
.tabs-bottom .ui-tabs-nav { 
    clear: left; 
    padding: 0 .2em .2em .2em; 
} 
.tabs-bottom .ui-tabs-nav li { 
    top: auto; 
    bottom: 0; 
    margin: 0 .2em 1px 0; 
    border-bottom: auto; 
    border-top: 0; 
} 
.tabs-bottom .ui-tabs-nav li.ui-tabs-active { 
    margin-top: -1px; 
    padding-top: 1px; 
}

來源

2013-07-11 nazir dogan

我竭力要明白你的意思。如果您只想加載選定的元素，則可以使其級別等於要加載的ID，然後使用它來確定要加載的內容。

HTML

<div id="selected_item" class="item_to_load">

的Java

var loadMe = document.getElementsById("selected_item"); 

function showOrLoad() { 
    var $item-to-load = document.getElementsByClassName(loadMe); 
}

這可能是你需要給每個滑塊項目的ID？

如果您爲所有滑塊條目賦予了一個唯一的ID，則可以隱藏「類」並顯示「ID」。

即

HTML

<div id="uniqueID" class="scroll-content-item ui-widget-header">14</div>

JQUERY

$('.scroll-content-item').hide(); 
$('#uniqueID').show();

UPDATE

我想你說你需要另一個類添加到所有滑塊項目。然後，當您選擇一個標籤項目時，您需要隱藏相應的滑塊項目。

來源

2013-07-11 08:04:17 Hepburn3D

我的意思是在頁面頂部有滾動滑塊。當我點擊滾動內容項目。它一次加載每個選項卡。 –

我想我明白你的意思。所以說你點擊標籤'Tasarim'，你可能希望它只加載滑塊'4,5,6'說？ – Hepburn3D

:)我的英語不太好..謝謝你的幫助..我的意思是當我點擊滑塊「4」。它只能加載活動標籤。當我更改標籤。然後它可以加載其他標籤，但滑塊項目必須是相同的，它必須是「4」。 –

順便說一下，您可以使用JQuery Cycle Plugin，與<div>和<ul>元素一起使用。這將解決你的許多問題，而無需重新發明輪子。你可以閱讀beginner demo,intermediate demos或advanced demo，或類似的東西，想罰款。

<!-- Pull some Libraries--> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
<!-- Slider code --> 
<script type="text/javascript"> 
$('#slider').cycle('slideX'); 
</script> 
<!-- Slider itself--> 
<ul id="slider"> 
    <li><img src='img1.png' title='first image' /></li> 
    <li><img src='img2.png' title='second image' /></li> 
    <li><img src='img3.png' title='third image' /></li> 
</ul>

來源

2013-07-11 08:31:23 Killrawr

我不知道如何使用它 –

閱讀演示找到[這裏]（http://malsup.com/jquery/cycle/begin.html）。 – Killrawr

Jquery滑塊加載每個標籤

回答

相關問題