2. 程式人生 > >排他佈局，點選導航顯示不同頁面內容。自定義屬性應用於索引。

排他佈局，點選導航顯示不同頁面內容。自定義屬性應用於索引。

阿新 • • 發佈：2018-12-11

排他佈局，點選不同導航，會顯示不同的內容。關鍵在於給導航標籤span設定自定義屬性index用於索引。這樣不同的導航索引對應下面不同內容。如：當點選產品：則顯示對應的產品模組。obj.setAttribute("index",i);  var numb=obj.getAttribute("index") ;具體的完整程式如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>排他佈局</title>    <style

>         *{margin:0;padding:0; }         .hd{height:50px;             width:50%;             margin:0 auto;             border:2px dotted red;             cursor:pointer;             }         .hd span{             line-height:50px;             font-size:25px;             padding:0 53px;             background-color
:deeppink;            }        .hd span.dj{background-color:blue;}/*點選後span變顏色*/         .bd{width:50%;             height:500px;             border:2px solid olivedrab;             margin:0 auto;             }         ul{list-style:none;}          .bd li{              height:500px;              background-color
:sandybrown;              display:none;          }         .bd li.ddj{display:block;}     </style></head><body>    <div class="hd">        <span class="dj" >首頁</span>        <span >新聞</span>        <span >產品</span>        <span >案例</span>        <span >聯絡我們</span>    </div>    <div class="bd">        <ul>            <li class="ddj">首頁模組</li>            <li>新聞模組</li>            <li >產品模組</li>            <li>案例模組</li>            <li>聯絡我們模組</li>        </ul>    </div>    <script>         var oSpans=document.getElementsByClassName("hd")[0].getElementsByTagName("span");//獲取span元素         var oLis=document.getElementsByClassName("bd")[0].getElementsByTagName("li");//獲取li元素         for(var i=0;i<oSpans.length;i++){             oSpans[i].setAttribute("index",i); //定義自定義屬性用來繫結對應順序。點選之前把索引放在標籤當中。             oSpans[i].onclick=function(){                 for(var j=0;j<oSpans.length;j++){                     oSpans[j].removeAttribute("class"); }//把所有的span元素的class選擇器刪除。                 this.className="dj";//當前點選的span標籤新增class標籤。                 var numb=this.getAttribute("index");//獲取索引                 for(var k=0;k<oLis.length;k++){                     oLis[k].removeAttribute("class"); }//把所有的li元素的class選擇器刪除                 oLis[numb].className="ddj";} }     </script></body></html>

相關推薦

排他佈局，點選導航顯示不同頁面內容。自定義屬性應用於索引。

排他佈局，點選不同導航，會顯示不同的內容。關鍵在於給導航標籤span設定自定義屬性index用於索引。這樣不同的導航索引對應下面不同內容。如：當點選產品：則顯示對應的產品模組。obj.setAttribute("index",i);  var numb=obj.getAttr

滾動div內容，變化導航欄狀態，點選導航欄切換div內容

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style> *{padding:0;margin:0;} .warp

Android問題集（二）——TextView在點選時顯示不同顏色，Button點選效果

1、在res目錄下新建名為color資料夾； 2、在color中新建text_color.xml檔案，並選擇selector選項（如下圖）： 3、在text_color.xml中填寫如下程式碼： <?xml version="1.0"

關於在列表中條目過多時顯示更多，點選全部顯示的效果

先上要的效果圖吧~ 拿到效果圖後的第一反應是 採用listView的不用型別的條目顯示，並對對相應的條目進行顯示（Visiable）與隱藏（gone）（第一類條目超過3個時就讓第3個位置顯示 顯示更多，並隱藏其他更多的第一類條目，點選第3個位置的條目，讓顯示更多隱藏，同時顯示更

硬碟分割槽檔案格式變成RAW，點選就顯示未格式化解決方法（小莫）

硬碟分割槽檔案格式變成RAW，點選就顯示未格式化。但格式化又失敗解決方法 以上問題都是分割槽由於某種原因造成了格式變化成RAW了，具體原因可能有很多，下面有幾種方法解決的方法也有幾個，西部e網歸納了一下，遇到此問題的朋友根據情況來解決吧！方案１、２只對原系統是NTFS格式有效

Android TextView限定行數最大值，點選按鈕顯示所有內容

package com.example.eventbusdemo;import android.app.Activity;import android.os.Bundle;import android.util.Log;import android.view.View;import android.view.

Android 自定義鍵盤 隨機鍵盤（完全定製，向上頂佈局，點選按鈕進行隱藏）

     之前上傳的另外一個自定義鍵盤，並沒有實現鍵盤彈出的時候，佈局向上自動調整。（網路上所有的自定義鍵盤都沒有新增自適應的功能，而且佈局沒這麼好看，上一個例子資源連結為：http://download.csdn.net/detail/omayyouhappy/91118

MFC實現當滑鼠移動到button按鈕上時是顯示一張圖片，移開顯示另外一張，點選是顯示另外一張

程式設計中，經常要用到按鈕控制元件，大部分情況下，文字按鈕就OK了，但有時為了更好的效果，需要用到圖形按鈕。 在MFC中，應用CBitmapButton就可以實現圖形按鈕。CBitmapButton類繼承自CButton類。你可以為圖形按鈕指定四張圖片，分別對應按鈕的四種

JS實現點選導航欄之後頁面滾動

原文地址：http://blog.csdn.net/luoshengmenwh/article/details/52830687 側欄導航點選實現頁面內容部分運動到相應位置，以及隨著body滾動條滾動使導航按鈕效果和頁面相應內容對應上的一個效果。  <!doct

div中新增多張img圖片，點選img跳轉頁面檢視大圖

var imgList = $.trim(that.find("td").eq(10).text()).split(";"); var myDiv = document.getElementById(

同一個網址，電腦手機訪問顯示不同的內容（Apache配置）

靜態資源 默認 rect apache xxx 手動 info 實現 ref 一、需求概述： 　　用戶訪問一個網址 https://www.xxx.com，如果是移動設備訪問，跳轉到移動端的頁面 https://www.xxx.com/mobile；如果是電腦訪問，則跳轉

攜程在手點選小按鈕縮放效果與自定義按鈕效果

   攜程在手點選小按鈕縮放效果思路很簡單，點選按鈕寫一個縮放動畫效果，延遲0.5m，接著進去相應的activity中。   1、在layout下建一個anim資料夾，寫一個set的set_scale.xml動畫，如下 <?xml version="1.0" enco

使用網頁巢狀iframe標籤，點選左側導航欄，在右側動態顯示頁面的資訊

<!--主體內容部分--> <div class="main"> <!-- 左側導航 --> <div class="main_left"> <div class="li_title">使用者管理<span

python學習之網站的編寫（HTML，CSS，JS）（二十三）----------示例，點選不同的選單在相同的位置顯示不同的內容（索引的方式）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <

python學習之網站的編寫（HTML，CSS，JS）（二十二）----------示例，點選不同的選單在相同的位置顯示不同的內容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <

首先是點選事件在不同的佈局層次中傳遞的。 理解Down事件再哪個層次被消費（攔截），後續的Move、Up的點選事件如何傳遞。 其中ViewGroup中onInterceptTouchEvent方法

首先是點選事件在不同的佈局層次中傳遞的。 理解Down事件再哪個層次被消費（攔截），後續的Move、Up的點選事件如何傳遞。 其中ViewGroup中onInterceptTouchEvent方法用來對事件作預處理的，對於Down事件返回true表示要消費這

記錄Android開發一個小坑，佈局檔案TextView中新增onClick後，點選無效問題

自己寫東西的時候，在TextView上添加了onClick去增加點選事件，去跳轉另一個Activity，執行後結果點選無效，新增Toast，Toast也不顯示，程式碼如下： <TextView android:layout_width="wrap_content"

jQuery遍歷多個相同的class，點選顯示隱藏圖示，顯示及隱藏其下的內容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=

文字隱藏，點選的時候顯示

html程式碼： 　　　　　　　　　　　　<div class="xq_text"> <div class="yw" v-for=" (item, i ) in wtjd" :key="i">

python學習之網站的編寫（HTML，CSS，JS）（十六）----------示例，構造一個左側管理選單的功能，點選主選單才顯示下面的內容

結果： 程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逆水行舟不進則退</title>