滑鼠切換頁簽問題

edited 十月 2013 in Javascript
各位先進:
想請教一下..目前我遇到一個問題:
1.有4個頁簽..分別用 <li> 控制
2.<li 上有class..若是class=1代表未點選此頁簽,若是class=2代表滑鼠點選此頁簽>
3.資料部分使用ajax方式取得

想請教:我該如何下手才能做到..
1.當網頁Load進來時,預設在第1個頁簽..這邊OK
2.當別的頁簽被點選時.該頁簽會更換class2,並且將原先按的頁簽變回class=1

我找了許多方法都只能做到ajax沒問題,可是class都不會變動..若是只放圖片這我還OK..但要更換 <li class="xxx"> 這個xxx就找不太到..
先謝謝了!!

原始討論: http://twpug.net/x/modules/newbb/viewtopic.php?topic_id=4510

評論

  • edited 九月 2009
    <style>
    .a {font-size: 10pt;}
    .b {font-size: 20pt;}
    </style>
    
    <script>
    function chgClass (o)
    {
            o.className = (o.className == 'a') ? 'b' : 'a'
    }
    </script>
    <a href=# class=a onClick='chgClass(this)'>切換 class</a>
    

    是指切換 className 嗎?像上面指定 className 就會變換了
  • edited 九月 2009
    也許可以將切換功能寫成一個函式,在裡面放一個迴圈,每次都檢查所有元素,選擇的元素設定為 2 ,而未選擇的元素設定為 1
  • edited 九月 2009
    各位先進:
    小弟已試出來讓它可以切換,但是如何讓class的顯示效果停留在該頁簽上呢?

    目前頁簽的下法如下方語法:

    <li class="2" onclick="ajaxRequest('post','xx1.php',{'target':'list'});" onmousedown="this.className='2'" onmousemove="2'" onmouseout="1'">1</li>
    <li class="1" onclick="ajaxRequest('post','xx2.php',{'target':'list'});" onmousedown="this.className='2'" onmousemove="2'" onmouseout="1'">2</li>
    <li class="1" onclick="ajaxRequest('post','xx3.php',{'target':'list'});" onmousedown="this.className='2'" onmousemove="2'" onmouseout="1'">3</li>
    <li class="1" onclick="ajaxRequest('post','xx4.php',{'target':'list'});" onmousedown="this.className='2'" onmousemove="2'" onmouseout="1'">4</li>
    再請大大指教.謝謝!!


  • edited 九月 2009
    不確定你的 ajaxRequest() 是那兒來的,如果來自 js 的 framework/library ,也許可以看看它有沒有提供註冊事件的方法,直接寫在標籤裏面會比較混亂。

    顯示的效果要停留在頁籤上,一點提示,一個事件可以放不只一段程式碼。
  • edited 九月 2009
    <style>
    .a {font-size: 14pt; color: #9f1b29;}
    .b {font-size: 20pt;}
    </style>
    
    <script>
    var li = null // 預設
    function chgClass (o)
    {
            if (o !== li) {
                    o.className = 'a'
                    li.className = 'b'
                    li = o
            }
    }
    
    window.onload = function ()
    {
            li = document.getElementById('li1')
    }
    
    </script>
    
    <li id=li1 class="a" onClick='chgClass(this)'>1</li>
    <li id=li2 class="b" onClick='chgClass(this)'>2</li>
    <li id=li3 class="b" onClick='chgClass(this)'>3</li>
    <li id=li4 class="b" onClick='chgClass(this)'>4</li>
    

    記住上一個被點的那個li
    預設就取第一個li..
    這樣只要點任一個,就會恢復上一個的className
    點相同的則不變..
  • edited 九月 2009
    各位先進:
    小弟已經試出來了..
    將程式碼PO出來讓大家參考一下:
    <script type="text/javascript">
    var currentLayer = "class_m1";

    function showLayer(obj,id){
    if(currentLayer!=obj.id) {
    showIt(currentLayer,false);
    currentLayer = obj.id;
    showIt(currentLayer,id,true);
    }
    }
    function showIt(o,cIndex,mode){
    var obj = document.getElementById(o);
    obj.className = mode?"class_2":"class_1";
    }
    </script>

    <li id="class_m1" class="class_2" onclick= "showLayer(this,0);ajaxRequest('post','xxx.php,{'target':'list'});">xx1</a></li>
    <li id="class_m2" class="class_1" onclick= "showLayer(this,1);ajaxRequest('post','xxx.php,{'target':'list'});">xx2</a></li>
    <li id="class_m3" class="class_1" onclick= "showLayer(this,2);ajaxRequest('post','xxx.php,{'target':'list'});">xx1</a></li>
    <li id="class_m4" class="class_1" onclick= "showLayer(this,3);ajaxRequest('post','xxx.php,{'target':'list'});">xx1</a></li>
Sign In or Register to comment.