2

idTabsWeb サイトの今後の再設計でjQuery を使用しています。私は自分のコンテンツに合わせてスタイルを設定しましたが、見栄えは良いですが、必要なものが欠けている機能がいくつかあります。

まず、私が今使っているものは次のとおりです。

<script type="text/javascript">
    $("#featured").idTabs("!mouseover"); 
</script>

明らかに、上記のコードは、ホバーすると次のタブに変更され、クリックが不要になることを意味します。

これが私がやりたいことです：

1 -ユーザーがタブを操作していないときに、指定された秒数ごとにタブを自動的に変更します。

2 -変化したら、フェードさせます。実際には、このための関数が既に にありますidTabs:

<script type="text/javascript"> 
    $("#adv2").idTabs(function(id,list,set){ 
        $("a",set).removeClass("selected") 
            .filter("[href='"+id+"']",set).addClass("selected"); 
        for(i in list) 
            $(list[i]).hide(); 
        $(id).fadeIn(); 
        return false; 
    }); 
</script>

mouseover唯一の問題は、イベントでうまく機能しないことです。それぞれにフェードインするのではなく、mouseover単に自動的に変化します。

誰でもこれで私を助けることができますか?

それは大歓迎です！ありがとう！

4

1 に答える 1

2

ここで、マウスオーバーやクリックなしで、一定の時間間隔でタブを自動的に変更するための完全なビンを作成しました。デモリンクを一度ご確認ください。

デモ: http://codebins.com/bin/4ldqp7r/2 HTML

<div>
  <div id="adv2">
    <ul>
      <li>
        <a class="selected" href="#ani1">
          1
        </a>
      </li>
      <li>
        <a href="#ani2">
          2
        </a>
      </li>
      <li class="split">
      </li>
      <li>
        <a href="#ani3">
          3
        </a>
      </li>
      <li>
        <a href="#ani4">
          4
        </a>
      </li>
    </ul>
    <span>
      <p id="ani1">
        Click on the tabs to see a nice fade.
      </p>
      <p id="ani2">
        You're not impressed?
      </p>
      <p id="ani3">
        But it's so cool... in a nerdy way.
      </p>
      <p id="ani4">
        Download idTabs and have your cake. You can eat it too.
      </p>
    </span>
  </div>
</div>

jQuery

$(function() {

var tabList, interval = 1800;
var tabDiv = $("#adv2").get(0);
var rotate = function() {
        var current = $("#adv2 ul a.selected").attr("href");
        var index = ($.inArray(current, tabList) + 1) % tabList.length;
        tabClick(tabList[index], tabList, tabDiv);
    }

var timer = setInterval(rotate, interval);
var tabClick = function(id, list, set, action) {
        if (!tabList) {
            tabList = list;
        }
        if (action && action.event == "click") {

            timer && clearInterval(timer);
            timer = setInterval(rotate, interval);
        }

        $("a", set).removeClass("selected").filter("[href='" + id + "']", set).addClass("selected");
        for (i in list) {
            $(list[i]).hide();
        }
        $(id).fadeIn();
        return false;
    }

$("#adv2").idTabs(tabClick);

});

**CSS:**

body{
  font: 10pt Calibri,Arial,sans-serif;
  text-align: center;
  color: #FFFFFF;
  background: none repeat scroll 0 0 #111111;
  margin: 0;
  padding: 0;
}

#adv2 {
  background: none repeat scroll 0 0 #181818;
  margin-left:5%;
  margin-top:5%;
  width: 500px;
}
#adv2 ul{
  display: block;
  float: left;
  height: 50px;
  width: 50px;
  margin:0px;
  background:#333;
}

#adv2 li {
  float: left;
}

li {
  list-style: none outside none;
}

#adv2 li a.selected {
  background: none repeat scroll 0 0 snow;
  color: #111111;
  font-weight: bold;
}

#adv2 li a {
  display: block;
  height: 25px;
  line-height: 22px;
  text-decoration: none;
  width: 25px;
}

#adv2 li a:hover {
  background:#0A0A0A;
}

#adv2 li.split {
  clear: both;
}

a{
  color: #FFFFFF;
}

a {
  outline: medium none;
}
#adv2 span {
  background: none repeat scroll 0 0 #181818;
  float: right;
  height: 50px;
  line-height: 45px;
  width: 410px;
}

デモ: http://codebins.com/bin/4ldqp7r/2

于 2012-09-04T11:48:04.693 に答える