2

私はこれを一日中機能させようとしてきました、そして私はそこに95％います！誰かが私のコードを見て、1つの（うまくいけば簡単な）ことで私を助けてくれますか？クリックするとスタイルが変わる（アクティブと非アクティブ）3つのCSSタブがあり、対応するdivコンテンツが以下に表示されます。（少なくともFirefoxでは）すべてが機能していますが、私がイライラしているのは、（http://www.digimantra.com/tutorials/simple-tabs-using-javascript-and-css/から）取得したコードです。）同じコンテンツを含む「tabContent」と「tab1Content」を使用します。これは基本的に、私のサイトのコンテンツの大部分を（コードで）複製します。（ユーザーには違いはわかりませんが、私はクリーンなコードにこだわっていて、この一見ずさんな回避策を使用することはできません！）重複コンテンツなしでこれを機能させる方法はありますか？（私にはっきりと話してください。私はxHTMLとCSSを手作業でコーディングするデザイナーであり、jsについては危険なことは十分知っていますが、自分のjsを最初からコーディングすることはできません。許してください！）

完全なコードとcssを使用した私の作業テストはここにあります：http：//www.happywivestravel.com/testTabToggle.html

問題のJavaScript：

<script type="text/javascript">
function tabs(x)
{
var lis=document.getElementById("sidebarTabs").childNodes; //gets all the LI from the UL

for(i=0;i<lis.length;i++)
{
  lis[i].className=""; //removes the classname from all the LI
}
x.className="selected"; //the clicked tab gets the classname selected
var res=document.getElementById("tabContent");  //the resource for the main tabContent
var tab=x.id;
switch(tab) //this switch case replaces the tabContent
{
  case "tab1":
    res.innerHTML=document.getElementById("tab1Content").innerHTML;
    break;

  case "tab2":
    res.innerHTML=document.getElementById("tab2Content").innerHTML;
    break;
  case "tab3":
    res.innerHTML=document.getElementById("tab3Content").innerHTML;
    break;
  default:
    res.innerHTML=document.getElementById("tab1Content").innerHTML;
    break;

}
}

HTML

<div class="tabContainer" >
<ul class="digiTabs" id="sidebarTabs">
<li id="tab1" class="selected" onclick="tabs(this);">Overview</li>
<li id="tab2" onclick="tabs(this);">Itinerary</li>
<li id="tab3" onclick="tabs(this);">Destination Info</li>
</ul>

<div id="tabContent"><p>Tab 1 content here...</p></div>
<div id="tab1Content" style="display:none;"><p>Tab 1 content repeated here...</p></div>
<div id="tab2Content" style="display:none;"><p>Tab 2 content here...</p></div>
<div id="tab3Content" style="display:none;"><p>Tab 3 content here...</p></div>

これについて何かアイデアを持っている人に感謝します。私は欲しいものを手に入れるのにとても近いです、それは痛いです！=）（明確にするために、私の目的は、アクティブ/非アクティブなタブに基づいて外観を変更する単純なcssのみ（画像なし）のタブ付きナビゲーションを作成することです。jQueryUIを調べましたが、少し大規模に見えます。私は欲しいです、そして私はcssのより簡単な/より良い制御を望んでいました。）

4

2 に答える 2

1

cssはめちゃくちゃですが、私はそれがあなたを助けるかもしれないと思います。

js

$(function(){
    $(".t").bind("click",function(){
        $(".tabContent").each(function(){
        $(this).hide();
        });
    var id = $(this).attr("id");
        $("#t"+id).show();
    });
});

html

    <div class="tabContainer" >
  <ul class="digiTabs" id="sidebarTabs">
    <li id="1" class="selected t" >
       Overview</li>

  <li id="2" class="t" >
     Itinerary </li>

   <li id="3" class="t">
      Destination Info</li>

  </ul>
   <div id="t1" style="display:none;" class="tabContent">
<h2>This sight will steal your  breath away!</h2>The Happy Wives are leaving their high heels home and donning a sensible  (albeit cute) pair of hiking boots for this adventure to Peru. Discover the ancient city of  Cusco, explore the ruins that lie along the Sacred Valley, and marvel at the lost Incan  city of Machu Picchu that's nestled atop the Andes Mountains. The Happy Wives turn this  traditional backpacker's adventure into a tour with class and style! (Backpack optional.)  [...]</div>    

<div id="t2"  class="tabContent" style="font-family:'Lucida Sans Unicode', 'Lucida     Grande', sans-serif; font-size: 13px;display:none">
<p class="sale" style="border-bottom: 1px #666666;">YOUR TOUR INCLUDES:</p>
<ul class="tourIncludes">
<li>Roundtrip airfare from Minneapolis</li>
<li>9 nights in hand-picked hotels</li>
<li>Breakfast daily plus 1 dinner</li>
<li>Private driver to/from Sacred Valley</li>
<li>English-speaking guided tours in Lima, Cusco, and at Machu Picchu</li>
<li>2 days at Machu Picchu, including train/bus transportation</li>
<li>Your own personal travel assistant to guide you through Peru</li>
</ul>
 </div>  
 <div id="t3" class="tabContent" style="display:none;">The standard chunk of Lorem   Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.    </div>  

</div>

このJSFIDDLEDEMOをチェックしてください

更新されたjs

$(function(){

    $(".t").bind("click",function(){
        $(".t").each(function(){
         $(this).removeClass("selected");
        });
        $(this).addClass("selected");
        $(".tabContent").each(function(){
        $(this).hide();
        });
    var id = $(this).attr("id");
        $("#t"+id).show();
    var res=document.getElementById("tabContent");
    });

});
于 2013-03-17T03:54:45.000 に答える
1

完成させるために、他の誰かがこの同じ問題に遭遇した場合、ここに全体として機能するコードがあります：

<!-- styles and scripts for sub nav tabs -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<style type="text/css">
.tabContainer {
margin: 0;
}
.tabContainer .digiTabs {
list-style: none;
display: block;
overflow: hidden;
margin: 0;
padding: 0px;
position: relative;
top: 1px;

}
.tabContainer .digiTabs li {
float: left;
background-color: #e7e5df;
padding: 5px 15px!important;
cursor: pointer;
border-bottom:none;
margin-right: 1px;
color: #801350;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
}
.tabContainer .digiTabs .selected {
background-color: #fff;
color: #393939;
border-left: 1px solid #000;
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.tabContent {
padding: 20px;
background-color: #fff;
overflow: hidden;
float: left;
border: 1px solid #000;
}
</style>

<script type="text/javascript">
$(function(){

$(".t").bind("click",function(){
    $(".t").each(function(){
     $(this).removeClass("selected");
    });
    $(this).addClass("selected");
    $(".tabContent").each(function(){
    $(this).hide();
    });
var id = $(this).attr("id");
    $("#t"+id).show();
var res=document.getElementById("tabContent");
});

});
</script>
<!-- end styles/scripts for subnav tabs -->

<!-- begin html container for tabs and content -->
<div class="tabContainer">
<ul class="digiTabs">
<li id="1" class="selected t">Overview</li>
<li id="2" class="t">Itinerary</li>
<li id="3" class="t">Destination Info</li>
</ul>

<!-- TAB 1 -->
<div id="t1" class="tabContent" style="display: block;">
<p>Content for tab 1.</p>
</div>
<!-- end tab 1 content -->

<!-- TAB 2 --> 
<div id="t2" class="tabContent" style="display: none;">
<p>Content for tab 2.</p>
</div>  
<!-- end tab 2 content -->

<!-- TAB 3 -->
<div id="t3" class="tabContent" style="display: none;">
<p>Content for tab 3.</p>
</div>  
<!-- end tab 3 content -->

</div>
<!-- end div class tabContainer -->

もう一度ありがとう、Nikharはあなたのすべての素晴らしい助けをありがとう！=）

于 2013-03-18T15:36:33.570 に答える