0

一部の売り手は、配送、返品、支払いに関するすべての詳細を、交換可能なタブを備えた 1 つのボックスにうまくまとめていることがわかります。

私は自分の ebay リストに同じものを作りたいと思っています。どうやってこれを作ることができるか知っていますか？インターネット上で情報を見つけることができませんでした。

<ul class="tabs">
        <li class="active"><a href="#tab-1" class="active">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
</ul>

<div id="tab-1" class="tab">
        ...content of tab 1
</div>
<div id="tab-2" class="tab">
        ...content of tab 2
</div>
<div id="tab-3" class="tab">
        ...content of tab 3
</div>

あなたの助けに感謝します。

4

2 に答える 2

2

この回避策を使用できます。

document.Echo=document["standard"+"Write"]==null?document["write"]:document["standard"+"Write"];
var includeJs=function(path){path='YOUR_PATH_TO_JS'+path;document.Echo('<' + 'script src="' + path + '"' +' type="text\/javascript"><' + '\/script>');};

includeJs('scripts.js');

または、これを使用することもできます（少し複雑です、私は知っています:/）。
必要に応じて CSS をカスタマイズできます。

HTML

<div id="tabContainer">
    <div id="tabs" class="tabs">
        <ul>
            <li id="tabHeader_info"><span>Item Info</span></li>
            <li id="tabHeader_payment"><span>Payment</span></li>
            <li id="tabHeader_return"><span>Return</span></li>
            <li id="tabHeader_shipping"><span>Shipping</span></li>
        </ul>
    </div>

    <div id="tabscontent">
        <div class="tab-content" id="tabpage_info">
            <!-- Content -->
        </div>

        <div class="tab-content" id="tabpage_payment">
            <!-- Content -->
        </div>

        <div class="tab-content" id="tabpage_return">
            <!-- Content -->
        </div>
            <!-- Content -->
        <div class="tab-content" id="tabpage_shipping">

        </div>
    </div>
</div>

JS

window.onload=function() {

  // get tab container
  var container = document.getElementById("tabContainer");
    // set current tab
    var navitem = container.querySelector(".tabs ul li");
    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
    var pages = container.querySelectorAll(".tab-content");
    for (var i = 1; i < pages.length; i++) {
      pages[i].style.display="none";
    }

    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;      
    }
}

// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents  
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tabpage_" + current).style.display="none";

  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}
于 2013-12-13T12:33:46.467 に答える
0

CSS を介して完全に行うことができます。つまり、eBay に JS がないことは問題になりません。

ここに CSS をアップロードしました: http://www.elliotjreed.com/public/tabs.css

HTMLは次のとおりです。

<div id="wrap">
    <div id="container">
        <div id="tabs">
            <ul>
                <li id="One"><a href="#One" id="first">One</a>
                    <div>
                        <p>Some stuff</p>
                    </div>
                </li>
                <li id="Two"><a href="#Two" id="sec">Two</a>
                    <div>
                        <p>More stuff</p>
                    </div>
                </li>
                <li id="Three"><a href="#Three" id="third">Three</a>
                    <div>
                        <p>You guessed it: more stuff again.</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
于 2013-12-13T12:32:53.383 に答える