Home Php C# Sql C C++ Javascript Python Java Go Android Git Linux Asp.net Django .net Node.js Ios Xcode Cocoa Iphone Mysql Tomcat Mongodb Bash Objective-c Scala Visual-studio Apache Elasticsearch Jar Eclipse Jquery Ruby-on-rails Ruby Rubygems Android-studio Spring Lua Sqlite Emacs Ubuntu Perl Docker Swift Amazon-web-services Svn Html Ajax Xml Java-ee Maven Intellij-idea Rvm Macos Unix Css Ipad Postgresql Css3 Json Windows-server Vue.js Typescript Oracle Hibernate Internet-explorer Github Tensorflow Laravel Symfony Redis Html5 Google-app-engine Nginx Firefox Sqlalchemy Lucene Erlang Flask Vim Solr Webview Facebook Zend-framework Virtualenv Nosql Ide Twitter Safari Flutter Bundle Phonegap Centos Sphinx Actionscript Tornado Register | Login | Edit Tags | New Questions | 繁体 | 简体


10 questions online user: 24

0
votes
answers
33 views
+10

jquery background-image

-4

如何用Jquery添加背景圖片,如果圖片的名稱是這樣的:../image(01).png,如果我以這種方式放置名稱../image01如果它工作,但不是當它有括號的圖像的名稱jquery background-image

+0

你能更好地解釋你想要什麼嗎 –

+0

沒有實際的代碼示例,不知道。但我同意,聽起來你需要擺脫這些括號。 – Snowmonkey

沙发
0
-1

聲音給我像URL編碼問題。

板凳
0
0

嘗試:/image%2801%29.png

percent+number東西被稱爲「百分比編碼」,並且是編碼符號的URL的方法,所以28是(和29是)(見here爲好)。

您沒有提供任何代碼示例,但我認爲這是問題,考慮您提供的少量信息。如果它不起作用,請編輯您的問題。另外,下一次你應該問google a bit之前,並且當你問的時候總是要包含相關的代碼示例。

+1

問題是,當我加載一個名稱中包含括號的圖像時,它不會向我顯示背景圖像,但如果圖像名稱中沒有括號,它可以正常工作,我正在使用數據庫提取圖像的名稱,所以我無法更改它們的名稱 它不起作用 $(「#preview_front」).css('background-image','url(../img/customcode/images/camaro- GT(07).PNG)'); 它正常工作 $(「#preview_front」)。css('background-image','url(../img/customcode/images/camaro-gt07.png)'); – Olbeng

+0

@Olbeng再次,你需要擺脫括號。嘗試:'$(「#preview_front」).css('background-image',url('../ img/customcode/images/camaro-gt%2807%29.png'))'。如果你從DB加載鏈接,你需要替換括號,即'extractString.replace('(','%28')' – yuvi

234
votes
answers
11 views
+10

How to get a cross-origin resource sharing (CORS) post request working

I have a machine on my local lan (machineA) that has two web servers. The first is the in-built one in XBMC (on port 8080) and displays our library. The second server is a CherryPy python script (port 8081) that I am using to trigger a file conversion on demand. The file conversion is triggered by a AJAX POST request from the page served from the XBMC server.

  • Goto http://machineA:8080 which displays library
  • Library is displayed
  • User clicks on 'convert' link which issues the following command -

jQuery Ajax Request

$.post('http://machineA:8081', {file_url: 'asfd'}, function(d){console.log(d)})
  • The browser issues a HTTP OPTIONS request with the following headers;

Request Header - OPTIONS

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://machineA:8080
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-requested-with
  • The server responds with the following;

Response Header - OPTIONS (STATUS = 200 OK)

Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:40:29 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1
  • The conversation then stops. The browser, should in theory, issue a POST request as the server responded with the correct (?) CORS headers (Access-Control-Allow-Origin: *)

For troubleshooting, I have also issued the same $.post command from http://jquery.com. This is where I am stumped, from jquery.com, the post request works, a OPTIONS request is sent following by a POST. The headers from this transaction are below;

Request Header - OPTIONS

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://jquery.com
Access-Control-Request-Method: POST

Response Header - OPTIONS (STATUS = 200 OK)

Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1

Request Header - POST

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://jquery.com/
Content-Length: 12
Origin: http://jquery.com
Pragma: no-cache
Cache-Control: no-cache

Response Header - POST (STATUS = 200 OK)

Content-Length: 32
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: application/json

I can't work out why the same request would work from one site, but not the other. I am hoping someone might be able to point out what I am missing. Thanks for your help!

up vote 141 down vote accepted favorite
沙发
+1410
+50

我終於偶然發現了這個鏈接“一個CORS POST請求可以從普通的javascript工作,但為什麼不用jQuery?”指出jQuery 1.5.1添加了

  Access-Control-Request-Headers :對所有CORS請求使用x-requested-with   

標頭。jQuery 1.5.2沒有這樣做。另外,根據同樣的問題,設置服務器響應頭

  Access-Control-Allow-Headers:*   

不允許響應繼續。您需要確保響應標頭具體包含所需的標頭。即:

 
     
			
        
+610

請求:

  $ .ajax({url:“http:// localhost:8079 / students / add /”,輸入:“POST”,crossDomain:true,data:JSON .stringify(somejson),dataType:“json”,success:function(response){var resp = JSON.parse(response)alert(resp.status);},error:function(xhr,status){alert(“error “);}}); 回复:  -type“,”application / json“)response .__ setitem __(”Access-Control-Allow-Origin“,”*“
     
			
        
+120

花了一些時間來找到解決方案。

如果您的服務器響應正確且請求有問題,您應該將 withCredentials:true 添加到請求中的xhrFields

  $。ajax({url:url,type:method,//這是重要的部分xhrFields:{withCredentials:true},//這個是重要的數據部分:數據,成功:功能(響應){//處理響應},錯誤:功能(xhr,狀態){//處理錯誤}});   

注意:jQuery> = 1.5.1 必需

jquery版好嗎?你設置了withCredentials:是嗎?你確定你有相關的標題? - Dekel於17年1月18日12:30

是的,1withCredential:true,jquery版本:3.2.1`。事實上,它是通過郵遞員工作,但它不通過鉻瀏覽器 - Mox Shah 17年8月18日在13:49

我幾乎可以肯定郵遞員不應該有CORS問題,因為它不是瀏覽器而且它的行為是不同的。您確定從服務器向客戶端發送了正確且相關的標頭嗎?再次 - 請注意,這種變化是不夠的。您需要使用正確的標頭確保服務器響應。 - Dekel於17年1月18日17:35

你能告訴我服務器上需要什麼樣的響應頭嗎? - Mox Shah 19年9月19日在5:02

@MoxShah這是一個完全不同的問題,那裡有很多資源:) - Dekel 17年9月19日在15:06

+90
<p>嗯我在這個問題上掙扎了幾個星期。</ p> <p>最簡單,最順從和非hacky的方法是使用提供程序JavaScript API,它不會進行基於瀏覽器的調用可以處理Cross Origin請求。</ p> <p>例如Facebook JavaScript API和Google JS API。</ p> <p>如果您的API提供者不是最新的,並且不支持Cross Origin Resource Origin'*'標題它的響應並沒有JS api(是的我在談論你的雅虎),你被三個選項中的一個擊中 - </ p> <ol> <li> <p>在你的請求中使用jsonp添加一個回調功能到您的URL,您可以在其中處理您的響應。請注意,這將更改請求URL,因此您的API服務器必須配備以處理URL末尾的?callback =。</ p> </ li> <li> <p>將請求發送到您的控制器的API服務器,並且與客戶端位於同一個域中,或者啟用了跨源資源共享,您可以在其中代理請求到第三方API服務器。</ p> </ li> <li> <p>在您發出OAuth請求並需要處理用戶交互的情況下,可能最有用哈哈!<code> window.open('url',“newwindowname”,'_ blank','toolbar = 0,location = 0,menubar = 0')</ code> </ p> </ li> </ ol> / li> <li> <p>在您正在製作OAuth請求並需要處理用戶交互的情況下,可能最有用哈哈!<code> window.open('url',“newwindowname”,'_ blank','toolbar = 0,location = 0,menubar = 0')</ code> </ p> </ li> </ ol> / li> <li> <p>在您正在製作OAuth請求並需要處理用戶交互的情況下,可能最有用哈哈!<code> window.open('url',“newwindowname”,'_ blank','toolbar = 0,location = 0,menubar = 0')</ code> </ p> </ li> </ ol>
+40

將此與Laravel結合使用解決了我的問題。只需將此標頭添加到您的jquery請求 Access-Control-Request-Headers:x-requested-with ,並確保您的服務器端響應具有此標頭集 Access-Control-Allow-Headers :*

沒有理由手動將CORS標頭添加到請求中。瀏覽器將始終為您的請求添加prop CORS標頭。 - Ray Nicholus 2014年4月13日12:50

真正的挑戰是讓服務器使用正確的Access-Control-Allow-Headers和JQ提供正確的Access-Control-Request-Headers(以及通過代碼添加的任何內容),這兩者都不是通配符。它只需要一個“壞”標題來炸毀飛行前,例如,如果服務器沒有列出,則使用條件GET的If-None-Match。 - escape-llc 17年6月8日17:36

+40
<p>通過使用Jquery ajax設置我的請求標頭,我在使用谷歌距離矩陣API時解決了我自己的問題。請看下面。</ p> <pre> <code> var settings = {'cache':false,'dataType':“jsonp”,“async”:true,“crossDomain”:true,“url”:“ https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&origins=place_id:"+me.originPlaceId+"&destinations=place_id:"+me.destinationPlaceId+"&region=ng& units = metric&key = mykey“,”method“:”GET“,”headers“:{”accept“:”application / json“,”Access-Control-Allow-Origin“:”*“ $ .ajax(settings).done(function(response){console.log(response);}); </ code> </ pre> <p>注意我在設置中添加的內容<br> ** </ p> <pre> <code>“headers”:{“accept”:“application / json”,“Access -Control-Allow-Origin“:”*“} </ code> </ pre> <p> ** <br>我希望這會有所幫助。</ p>

這是唯一適用於我們的解決方案,無需更改服務器端的任何內容... thanx miracool - Timsta 18年7月13日在21:12

@Timsta,很高興我的建議對你有用。感謝堆棧溢出。祝你有美好的一天。 - Miracool 18年7月16日6:04

+10
<p>出於某種原因,有關GET請求的問題已與此問題合併,因此我將在此處回复。</ p> <p>此簡單函數將異步從啟用CORS的頁面獲取HTTP狀態回复。如果您運行它,您將看到只有具有正確標頭的頁面返回200狀態,如果通過XMLHttpRequest訪問 - 無論是使用GET還是POST。如果你只需要一個json對象,除了可能使用JSONP之外,在客戶端沒有什麼可以解決這個問題。</ p> <p>可以很容易地修改以下內容來獲取xmlHttpRequestObject對像中保存的數據:</ p > <p> </ p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet -code“> <pre class =” /立GT; &LT; / UL&GT; &lt; p&gt;單擊按鈕以查看頁面是否允許CORS&lt; / p&gt; &lt; form name =“form1”action =“”method =“get”&gt; &lt; input type =“button”name =“btn1”value =“檢查Google Page”onClick =“checkCorsSource('google')”&gt; &lt; input type =“button”name =“btn1”value =“Check Cors Page”onClick =“checkCorsSource('cors')”&gt; &LT; /形式&GT; &lt; p id =“txt1”/&gt; &LT; /體&GT; &lt; / html&gt; </ code> </ pre> </ div> </ div>
+10
<p>我有完全相同的問題,jquery ajax只給了我關於獲取請求工作正常的帖子請求的cors問題 - 我累了上面的所有內容沒有結果。我的服務器中有正確的標題等。更改為使用XMLHTTPRequest而不是jquery立即修復了我的問題。無論我使用哪個版本的jquery都沒有解決它。如果您不需要向後兼容瀏覽器,Fetch也可以正常運行。</ p> <pre> <code> var xhr = new XMLHttpRequest()xhr.open('POST','https://mywebsite.com', true)xhr.withCredentials = true xhr.onreadystatechange = function(){if(xhr.readyState === 2){// do something}} xhr.setRequestHeader('Content-Type','application / json')xhr。發送(json)</ code> <
+10
<p>這是對我有用的摘要:</ p> <p>定義一個新函數(包裝<code> $。ajax </ code>以簡化):</ p> <pre> <code> jQuery.postCORS = function(url,data,func){if(func == undefined)func = function(){}; return $ .ajax({type:'POST',url:url,data:data,dataType:'json',contentType:'application / x-www-form-urlencoded',xhrFields:{withCredentials:true},success: function(res){func(res)},error:function(){func({})}}); } </ code> </ pre> <p>用法:</ p> <pre> <code> $。postCORS(“https://example.com/service.json”,{x:1},function( obj){if(obj.ok){...}}); </ code> </ pre> <p>也適用於<code>。完成</ code>,<code> .fail </ code>等:</ p> <pre> <code> $。postCORS(“https://example.com/service.json”,{x:1 })。done(function(obj){if(obj.ok){...}})。fail(function(){alert(“Error!”);}); </ code> </ pre> <p>服務器端(在這種情況下託管example.com),設置這些頭文件(在PHP中添加一些示例代碼):</ p> <pre> <code> header(' Access-Control-Allow-Origin:https://not-example.com'); header('Access-Control-Allow-Credentials:true'); 標題('Access-Control-Max-Age:604800'); header(“Content-type:application / json”); $ array = array(“ok”=&gt; $ _POST [“x”]); echo json_encode($ array); </ code> </ pre> <p> 這是我所知道的從JS真正POST跨域的唯一方法。</ p> <p> JSONP將POST轉換為GET,這可能會在服務器日誌中顯示敏感信息。</ p>
0
<p>如果由於某些原因在嘗試添加標頭或設置控制策略時,您仍然無法使用apache ProxyPass </ p> <p>例如在一個<code>&lt; VirtualHost&gt; </ code>中使用SSL添加以下兩個指令:</ p> <pre> <code> SSLProxyEngine On ProxyPass / oauth https://remote.tld/oauth </ code> </ pre> <p>確保以下apache模塊加載(使用a2enmod加載它們):</ p> <ul> <li> proxy </ li> <li> proxy_connect </ li> <li> proxy_http </ li> </ ul> <p>顯然你'為了使用apache代理</ p>,我必須更改你的AJAX請求url
-40

這對派對來說有點晚了,但我幾天都在努力解決這個問題。這是可能的,我在這裡找到的答案都沒有奏效。這看似簡單。這是.ajax調用:

 &lt;!DOCTYPE HTML&gt; &LT; HTML&GT; &LT; HEAD&GT; &LT;身體GT; &lt; title&gt; Javascript Test&lt; / title&gt; &lt; script src =“http://code.jquery.com/jquery-latest.min.js”&gt;&lt; / script&gt; &lt; script type =“ 0){while($ row = $ result-&gt; fetch_assoc()){echo $ row [“email”]。“:”。$ row [“status”]。“:”。$ row [“userdata”]。“&LT峰; br&gt;”中; }} else {echo“{}”; } $ conn-&gt; close(); ?&GT; &lt; / body&gt;    

     
			
        

對於它的價值,Origin標頭是一個請求標頭,而不是一個響應標頭。你的PHP腳本不應該設置它。 - 麵條2016年11月24日22:36

Hmmph。當我看到你在你的代碼中製作一個AJAX“GET”時,這讓我有了希望,然後破了他們,當OP明確表示他試圖使用“GET”避免並想要使用“POST”時。 - Steve Sauder 17年3月26日5:22

無論涉及的動詞如何,CORS頭文件的工作方式都相同。我們可以通過$ .ajax()對正確配置的服務器調用所有動詞。最難的部分是使Access-Control-Request-Headers正確,但即使這樣也不是太難。如前面的海報所述,這不應該是通配符,而是標題的白名單。 - escape-llc 17年6月8日17:30

歡迎!@Siddharth - Harshit Pant 18年12月28日5:05

0
votes
answers
24 views
+10

搜索特定列中的數字範圍並隱藏不在範圍內的行

-1

我想要搜索表格的某一列,查找不帶數據表插件的數字範圍並使用jquery或javascript。
用於最小值的文本框和用於最大值的文本框。搜索特定列中的數字範圍並隱藏不在範圍內的行

我有一個簡單的搜索某些列,但我不知道如何使它搜索範圍。

的javascript:

function SFNAAB_Code() { 

    var input, filter, table, tr, td, i; 
    input = document.getElementById("SFNAAB_CodeInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 

    for (i = 0; i < tr.length; i++) { 
     td = tr[i].getElementsByTagName("td")[1]; 
     if (td) { 
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
       tr[i].style.display = ""; 
      } else { 
       tr[i].style.display = "none"; 
      } 
     } 
    } 
} 

HTML:

<input type="text" id="SFNAAB_CodeInput" onkeyup="SFNAAB_Code()" 
placeholder="Search By NAAB Code..."> 

<table id="myTable"> 
    <thead> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.RegNo) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.NAAB_CODE) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.NAME) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.ICC) 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    @foreach (var item in Model) 
    { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.RegNo) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.NAAB_CODE) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.NAME) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.ICC) 
      </td> 
     </tr> 
    } 
     </tbody> 
    </table> 
+0

我認爲你將不得不爲每個列TD進行搜索,然後或在您若檢查 – dementis

+0

你是說你每個條件要'td.innerHTML .toUpperCase()。indexOf(filter)> -1'是範圍檢查而不是存在檢查? – Taplar

+0

@Taplar是! ,我如何改變它有兩個文本框的最小值和最大值? –

沙发
0
0

解決它使用範圍的搜索數據表插件使用這些選項:

var table = $('#myTable').DataTable({ 
     paging: false, 
     info: false 
    }); 

,並移除了sDOM的F。
繼承人的代碼:

$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) { 
    var min = parseInt($('#min').val(), 10); 
    var max = parseInt($('#max').val(), 10); 
    var age = parseFloat(data[3]) || 0; 

    if ((isNaN(min) && isNaN(max)) || 
     (isNaN(min) && age <= max) || 
     (min <= age && isNaN(max)) || 
     (min <= age && age <= max)) 
    { 
     return true; 
    } 
    return false; 
} 
); 

$(document).ready(function() { 
var table = $('#example').DataTable({ 
    paging: false, 
    info: false 
}); 

$('#min, #max').keyup(function() { 
    table.draw(); 
}); 
}); 

datatables Custom filtering - range search

0
votes
answers
22 views
+10

jQuery的DOM元素不是之後頁面加載定義? (Magento的2)

-1

我在Magento 2使用jQuery和我有以下代碼:jQuery的DOM元素不是之後頁面加載定義? (Magento的2)

require(["jquery"], function($) { 
    var productCarousel = $('.product-carousel-slideshow'); 
    console.log(productCarousel); 
} 

元素日誌按預期控制檯,但是一旦頁面加載,我不能做任何事元素,如果我在它沒有定義控制檯輸入productCarousel,這是什麼原因?

+1

歡迎堆棧溢出!請把[旅遊]看看周圍,並通過[幫助]閱讀,特別是[*如何我問一個很好的問題?*](/幫助/如何對問)*「一旦頁面加載的,我不能做的任何元素「*告訴我們在哪兒,你是如何想用它做什麼。 *「如果我在控制檯輸入productCarousel沒有定義」 *當然不是,這不是一個全球性的,它是一個局部範圍的** **僅向'require'回調。如果您在該功能中的某個斷點處暫停,您可以從控制檯訪問它,但不能以其他方式訪問它。 –

沙发
0
0

的productCarousel在本地定義爲需要回調,只要將定義全球,你將能夠在加載後對其進行訪問。

板凳
0
0

如果您正在重寫magento模塊,那麼您可以在文件Path中簡單更改路徑app/design/frontend /供應商名稱/主題名稱/模塊名稱/ requirejs-config.js。如果您已經創建自定義模塊,然後應用程序/代碼/供應商名稱/自定義模塊/視圖/前端/ requirejs-config.js

var config = { 
    paths: {    
    'Owlcarousel' : 'VendorName_ModuleName/js/owl.carousel.min'  
    }, 
    shim: { 
    'Owlcarousel': { 
     deps: ['jquery'] 
    } 
    } 
} 

的腳本PHTML:

<script> 
    require([ 
     'jquery', 
     'Owlcarousel' 
    ], function ($, Owlcarousel) { 
     $('#.product-carousel-slideshow-<?php echo $productsliderId;?>').owlCarousel(<?php echo ($block->getAllOptions())?>); 
    }); 

0
votes
answers
25 views
+10

離不開按鈕

1

我想暫停旋轉木馬用下面的代碼暫停旋轉木馬:離不開按鈕

$('#carousel').carousel("pause"); 

但是,這是行不通的。當我把它放在這樣一個按鈕的功能:

$("#myBtn2").click(function(){ 
    $("#carousel").carousel("pause"); 
}); 

它的工作原理!爲什麼是這樣?我怎樣才能讓它在沒有按下按鈕的情況下工作?

+0

請加[最小的,完整的,和可覈查的示例](https://stackoverflow.com/help/mcve/ )它顯示了實際的問題。 – Andreas

+0

您暫停按鈕單擊。當您嘗試使用以下代碼嘗試暫停輪播時: –

沙发
0
0

它不應該是:

$(document).ready(function() { 
$('#carousel').carousel("pause"); 
}); 
板凳
0
0

嘗試:

$(window).on("load", function() { 
     $('#carousel').carousel("pause"); 
}); 
0
votes
answers
20 views
+10

調整一次調整兩個Div

0

所以基本上,我有一個容器內的底部div和頂部div。我需要底部的div可以調節,頂部的div可以跟隨它並佔據空的空間。我做了一個簡單的jQuery腳本,但它的行爲非常不正常,似乎以指數方式擴展所有內容。調整一次調整兩個Div

這裏是我的代碼:

var lol = $("#lol").height(); 
 
var message = $("#text").height(); 
 
$("#message").height(lol - message); 
 

 
$("#text").resizable({ 
 
    handles: 'n', 
 
    resize: function() { 
 
    var lol = $("#lol").height(); 
 
    var message = $("#text").height(); 
 

 
    $("#message").height(lol - message); 
 
    } 
 
});
#lol { 
 
    position: absolute; 
 
    top: 150px; 
 
    bottom: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    border: 1px solid black; 
 
} 
 

 
#message { 
 
    background: black; 
 
    height: 400px; 
 
    width: 700px; 
 
} 
 

 
#text { 
 
    background: red; 
 
    width: 700px; 
 
    height: 100px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link href="https://fonts.googleapis.com/css?family=Raleway|Sarina" rel="stylesheet"> 
 
<script src='https://www.google.com/recaptcha/api.js'></script> 
 

 
<div id="lol"> 
 
    <div id="message"> 
 

 
    </div> 
 
    <div id="text"> 
 

 
    </div> 
 
</div>

+0

您需要哪種類型的輸出 – Bhargav

沙发
0
0

當調整text它移動的div top。您可以將top重置爲0以阻止其移動。

這裏有2個解決方案:

var lolHeight = $("#lol").height(); 
 
var $message = $("#message"); 
 
var $text = $("#text"); 
 
$message.height(lolHeight - $text.height()); 
 

 
$text.resizable({ 
 
    handles: 'n', 
 
    resize: function(event, ui) { 
 
    $message.height(lolHeight - ui.size.height); 
 
    ui.position.top = 0; 
 
    } 
 
});
#lol { 
 
    position: absolute; 
 
    top: 150px; 
 
    bottom: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    border: 1px solid black; 
 
} 
 

 
#message { 
 
    background: black; 
 
    height: 400px; 
 
    width: 700px; 
 
} 
 

 
#text { 
 
    background: red; 
 
    width: 700px; 
 
    height: 100px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link href="https://fonts.googleapis.com/css?family=Raleway|Sarina" rel="stylesheet"> 
 
<script src='https://www.google.com/recaptcha/api.js'></script> 
 

 
<div id="lol"> 
 
    <div id="message"> 
 

 
    </div> 
 
    <div id="text"> 
 

 
    </div> 
 
</div>

或者

var lolHeight = $("#lol").height(); 
 
var $message = $("#message"); 
 
var $text = $("#text"); 
 
$message.height(lolHeight - $text.height()); 
 

 
$message.resizable({ 
 
    handles: 's', 
 
    resize: function(event, ui) { 
 
    $text.height(lolHeight - ui.size.height); 
 
    } 
 
});
#lol { 
 
    position: absolute; 
 
    top: 150px; 
 
    bottom: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    border: 1px solid black; 
 
} 
 

 
#message { 
 
    background: black; 
 
    height: 400px; 
 
    width: 700px; 
 
} 
 

 
#text { 
 
    background: red; 
 
    width: 700px; 
 
    height: 100px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link href="https://fonts.googleapis.com/css?family=Raleway|Sarina" rel="stylesheet"> 
 
<script src='https://www.google.com/recaptcha/api.js'></script> 
 

 
<div id="lol"> 
 
    <div id="message"> 
 

 
    </div> 
 
    <div id="text"> 
 

 
    </div> 
 
</div>

0
votes
answers
22 views
+10

我如何能夠根據JSON數據的緯度和長度來居中顯示地圖,當點擊標記時,彈出窗口會顯示vueJS中的名稱?

1

我用於獲取JSON數據並顯示地圖vueJS腳本我如何能夠根據JSON數據的緯度和長度來居中顯示地圖,當點擊標記時,彈出窗口會顯示vueJS中的名稱?

<script> 
    new Vue({ 
    el: '#feed' , 
    data: { 
     data: [], 
    }, 
    mounted() { 
     this.$nextTick(function() { 
     var self = this; 
     var id = window.location.href.split('=').pop() 

     //this code 
     var options = { 
      zoom: 6, 
      center: new google.maps.LatLng(12.92, 77.25), // Centered 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeControl: false 
     }; 

     // Init map 
     var map = new google.maps.Map(document.getElementById('mapName'), options); 
     console.log(id) 
     $.ajax({ 
      url: "https://n2s.herokuapp.com/api/post/get/10", 
      method: "GET", 
      dataType: "JSON", 
      success: function (e) { 
      if (e.status == 1) { 
       self.data = e.data; 
       console.log(e.data); 
       //use code 
       var i=0;  

       // Init markers 
       var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(e.data.lat , e.data.lon), 
       map: map, 
       title: 'Click Me ' + i, 
       }); 

       // Process multiple info windows 
       (function(marker, i) { 
       // add click event 
       google.maps.event.addListener(marker, 'click', function() { 
        infowindow = new google.maps.InfoWindow({ 
        content: e.data.lat 
        }); 
        infowindow.open(map, marker); 
       }); 
       })(marker, i); 
      } else { 
       console.log('Error occurred');} 
      }, error: function(){ 
       console.log('Error occurred'); 
      } 
      }); 
     }) 
     }, 
    }) 
</script> 

我需要地圖中心按lat和長時間顯示在JSON數據和 此外,當我點擊該標記,我需要在即將到來的彈出窗口中顯示名稱。可以請任何人幫我解決問題嗎?

+0

仍然沒有運氣?仍然詳細說明谷歌地圖集成? – WaldemarIce

+0

@WaldemarIce是的先生!我卡在 – coder

沙发
0
0

我試圖落實到你的代碼

<script> 
    new Vue({ 
    el: '#feed' , 
    data: { 
     data: [], 
    }, 
    mounted() { 
     this.$nextTick(function() { 
     var self = this; 
     var id = window.location.href.split('=').pop() 

     // Init map 
     var map; 

     var myLatlng = new google.maps.LatLng(12.92, 77.25); 
      function initMap() { 

        map = new google.maps.Map(document.getElementById('mapName'), { 
         center: myLatlng, 
         mapTypeId: google.maps.MapTypeId.ROADMAP, 
         mapTypeControl: false, 
         zoom: 6 
        }); 
    } 

initMap(); 


     console.log(id) 
     $.ajax({ 
      url: "https://n2s.herokuapp.com/api/post/get/10", 
      method: "GET", 
      dataType: "JSON", 
      success: function (e) { 
      if (e.status == 1) { 
       self.data = e.data; 
       console.log(e.data); 
       //use code 
       var i=0;  

       // Init markers 
       var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(e.data.lat , e.data.lon), 
       map: map, 
       title: 'Click Me ' + i, 
       }); 

       // Process multiple info windows 
       (function(marker, i) { 
       // add click event 
       google.maps.event.addListener(marker, 'click', function() { 
       alert(e.data.bussinessName); 
       }); 
        infowindow.open(map, marker); 
       }); 
       })(marker, i); 
      } else { 
       console.log('Error occurred');} 
      }, error: function(){ 
       console.log('Error occurred'); 
      } 
      }); 
     }) 
     }, 
    }) 
</script> 
+0

哪裏應用這些代碼在我的腳本?你能否請建議 – coder

+0

我試圖把它實現到你的代碼 – piscu

+0

沒有先生..上面沒有做任何改變..我不能中心地圖根據我的緯度和長..還點擊它時顯示「點擊我0」 – coder

0
votes
answers
14 views
+10

選擇下拉列表顯示分格

1

我正在響應網站上開發選項卡式組件。它的工作方式是,在桌面和平板電腦上,我呈現一個菜單,然後單擊菜單按鈕時,我會顯示相應的div。菜單選擇下拉列表顯示分格

桌面和平板電腦:

Desktop and Tablet for Menu

所以,當我選擇不同的選項卡選項,我顯示相應的標籤內容。對於手機,我必須將此菜單轉換爲下拉菜單,我可以做到這一點。但點擊下拉列表中的值時,我想呈現相應的標籤內容,這是我無法做到的。我想在選擇下拉值時顯示相應的選項卡。任何幫助表示讚賞。請找到附加的JSFiddle。

function testFunction(evt, tabNumber) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
    tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 
    document.getElementById(tabNumber).style.display = "block"; 
 
    evt.currentTarget.className += " active"; 
 
} 
 

 
$(document).ready(function() { 
 
    $('.dropdown > ul').toggleClass('no-js js'); 
 
    $('.dropdown .js ul').hide(); 
 
    $('.dropdown .js').click(function(e) { 
 
    $('.dropdown .js ul').slideToggle(200); 
 
    $('.dropbtn').toggleClass('active'); 
 
    e.stopPropagation(); 
 
    e.stopPropagation(); 
 
    }); 
 
    if ($('.dropdown .js ul').is(':visible')) { 
 
    $('.dropdown .js ul', this).slideUp(); 
 
    $('.dropbtn').removeClass('active'); 
 
    } 
 

 
    $("#filter-options-ul li").on("click", function() { 
 
    console.log('clicked'); 
 
    var val = $(this).find('span').html(); 
 
    //$('.filter-options').css('border-right', '20px solid' + col); 
 
    $('.dropbtn').html(val); 
 
    }); 
 
});
@media all and (min-width:320px) and (max-width:767px) { 
 
    .c-koh-tabbed-article .koh-article-header { 
 
    border-bottom: none; 
 
    } 
 
    .dropdown { 
 
    position: relative; 
 
    display: block; 
 
    margin-top: 30px; 
 
    margin-bottom: 30px; 
 
    } 
 
    .dropbtn { 
 
    background-color: #fff; 
 
    font-family: Helvetica Neue LT Pro Roman; 
 
    font-size: 14px; 
 
    color: #000; 
 
    width: 100%; 
 
    padding: 15px; 
 
    text-align: left; 
 
    border: 1px solid #e5e5e5; 
 
    cursor: pointer; 
 
    } 
 
    .dropbtn::after { 
 
    content: "e600"; 
 
    font-family: KohlerIcons; 
 
    font-size: 12px; 
 
    width: 16px; 
 
    height: 16px; 
 
    float: right; 
 
    margin-top: 5px; 
 
    box-sizing: border-box; 
 
    } 
 
    .dropdown ul { 
 
    position: relative; 
 
    padding-left: 0px; 
 
    font-weight: 400; 
 
    margin-bottom: 0; 
 
    font-size: 14px 
 
    } 
 
    .dropdown ul li { 
 
    position: relative; 
 
    list-style: none; 
 
    cursor: pointer; 
 
    } 
 
    .dropdown ul li ul { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 9999; 
 
    } 
 
    .dropdown ul li ul { 
 
    padding-left: 0px; 
 
    } 
 
    .dropdown ul li li span { 
 
    font-family: Helvetica Neue LT Pro Roman; 
 
    font-size: 14px; 
 
    color: #000; 
 
    transition: background-color 0.2s ease-in-out; 
 
    -webkit-transition: background-color 0.2s ease-in-out; 
 
    -moz-transition: background-color 0.2s ease-in-out; 
 
    display: block; 
 
    background: #fff; 
 
    padding: 20px 15px; 
 
    border: 1px solid #e5e5e5; 
 
    } 
 
    /* Fallbacks */ 
 
    .dropdown .no-js ul { 
 
    display: none; 
 
    } 
 
} 
 

 
@media all and (min-width:768px) { 
 
    .dropdown { 
 
    display: none; 
 
    } 
 
    .c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set { 
 
    display: table; 
 
    border: none; 
 
    box-shadow: none; 
 
    } 
 
    .c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set li { 
 
    display: table-cell; 
 
    border-bottom: none; 
 
    } 
 
    .button-default { 
 
    font-family: Nexa W01 Heavy !important; 
 
    font-size: 14px !important; 
 
    color: #77777A !important; 
 
    display: inline !important; 
 
    width: 100% !important; 
 
    padding: 0px 20px !important; 
 
    height: 45px !important; 
 
    margin: 0 !important; 
 
    background: #FFF !important; 
 
    border: 1px solid #77777A !important; 
 
    color: #77777A !important; 
 
    border-radius: 0px !important; 
 
    text-transform: uppercase !important; 
 
    } 
 
    .button-default:hover { 
 
    background: #77777A !important; 
 
    color: #FFF !important; 
 
    } 
 
    .button-default.active { 
 
    background: #77777A !important; 
 
    color: #FFF !important; 
 
    } 
 
    .tabcontent { 
 
    margin: 30px 0px; 
 
    text-align: left; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    } 
 
} 
 

 
.c-koh-tabbed-article .koh-article-header .koh-article-title { 
 
    font-family: Nexa W01 Heavy !important; 
 
    font-size: 30px !important; 
 
    color: #000 !important; 
 
    font-weight: bold !important; 
 
} 
 

 
.c-koh-tabbed-article .koh-article-header .koh-article-controls { 
 
    height: auto !important; 
 
} 
 

 
.strong { 
 
    font-family: Nexa W01 XBold !important; 
 
    font-size: 18px !important; 
 
    color: #000 !important; 
 
} 
 

 
.article-sub-text { 
 
    font-family: Helvetica Neue LT Pro Roman !important; 
 
    font-size: 14px !important; 
 
    color: #000 !important; 
 
    font-weight: 400 !important; 
 
} 
 

 
.left-column { 
 
    width: 50%; 
 
    float: left; 
 
    padding-right: 20px; 
 
} 
 

 
.right-column { 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.right-column img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
@media all and (min-width:980px) { 
 
    .tabcontent { 
 
    margin: 30px 0px 30px 10px; 
 
    text-align: left; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    } 
 
    .button-default { 
 
    font-family: Nexa W01 Heavy !important; 
 
    font-size: 14px !important; 
 
    color: #77777A !important; 
 
    display: inline !important; 
 
    width: auto !important; 
 
    padding: 0px 45px !important; 
 
    height: 45px !important; 
 
    margin: 0px 20px 0px 0px !important; 
 
    background: #FFF !important; 
 
    border: 1px solid #77777A !important; 
 
    color: #77777A !important; 
 
    border-radius: 0px !important; 
 
    text-transform: uppercase !important; 
 
    } 
 
    .button-default:last-child { 
 
    margin: 0px !important; 
 
    } 
 
    .button-default:hover { 
 
    background: #77777A !important; 
 
    color: #FFF !important; 
 
    } 
 
    .button-default.active { 
 
    background: #77777A !important; 
 
    color: #FFF !important; 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<section class="c-koh-tabbed-article"> 
 
    <div class="koh-article-container"> 
 
    <div class="koh-article-header"> 
 
     <div class="koh-article-controls"> 
 
     <ul class="koh-article-set"> 
 
      <li><button onclick="testFunction(event,'tab1')" class="button-default tablinks">Blandit</button></li> 
 
      <li><button onclick="testFunction(event,'tab2')" class="button-default tablinks" href="javascript:void(0);">Aliquam</button></li> 
 
      <li><button onclick="testFunction(event,'tab3')" class="button-default tablinks" href="javascript:void(0);">Pharetra Maximus</button></li> 
 
      <li><button onclick="testFunction(event,'tab4')" class="button-default tablinks" href="javascript:void(0);">Tincidunt</button></li> 
 
      <li><button onclick="testFunction(event,'tab5')" class="button-default tablinks" href="javascript:void(0);">Condimentum</button></li> 
 
     </ul> 
 

 
     <div class="dropdown"> 
 
      <ul class="no-js"> 
 
      <li> 
 
       <button id="filter-options" class="dropbtn">Select One</button> 
 
       <ul id="filter-options-ul"> 
 

 
       <li><span>Blandit</span></li> 
 
       <li><span>Aliquam</span></li> 
 
       <li><span>Pharetra Maximus</span></li> 
 
       <li><span>Tincidunt</span></li> 
 
       <li><span>Condimentum</span></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="tab1" class="tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab65695_1800x800?$1800Hero$" alt="Kohler Image"></img> 
 
      </div> 
 
     </div> 
 
     <div id="tab2" class="container tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/aab27241_1800x800" alt="Kohler Image"> 
 
      </div> 
 
     </div> 
 
     <div id="tab3" class="tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab80843_rgb?crop=(102,1521,4876,2167)$" alt="Kohler Image"> 
 
      </div> 
 
     </div> 
 
     <div id="tab4" class="tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://s3.img-b.com/image/private/t_base,f_auto,c_lpad,h_800/product/Kohler/kohler-k-6331-alternate-image-4-473.jpg" alt="Kohler Image"> 
 
      </div> 
 
     </div> 
 
     <div id="tab5" class="tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab42000_1800x800?$1800Hero$" alt="Kohler Image"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

的下拉菜單和選項卡都顯示,我不知道爲什麼樣式不拾取。可能是媒體查詢。但功能起作用。當你點擊標籤時,你會看到在下拉菜單下顯示的2個div。當我點擊下拉值時,我想達到同樣的效果。任何幫助表示讚賞。

+0

您使用「」這樣的錯誤的圖像標籤是像這樣的「」完蛋了 –

+1

好這裏是工作[小提琴](https://jsfiddle.net/qcwzrem0/1/ )你想要你使用錯誤的圖像標籤 –

沙发
0
1

你是你的代碼太複雜,不喜歡下面: -

function testFunction(evt, tabNumber) { 
    $('.tabcontent').hide(); 
    $("#"+tabNumber).show(); 
} 

工作例如: -

function testFunction(evt, tabNumber) { 
 
    $('.tabcontent').hide(); 
 
    $("#"+tabNumber).show(); 
 
} 
 

 
$(document).ready(function() { 
 
    $('.dropdown > ul').toggleClass('no-js js'); 
 
    $('.dropdown .js ul').hide(); 
 
    $('.dropdown .js').click(function(e) { 
 
    $('.dropdown .js ul').slideToggle(200); 
 
    $('.dropbtn').toggleClass('active'); 
 
    e.stopPropagation(); 
 
    e.stopPropagation(); 
 
    }); 
 
    if ($('.dropdown .js ul').is(':visible')) { 
 
    $('.dropdown .js ul', this).slideUp(); 
 
    $('.dropbtn').removeClass('active'); 
 
    } 
 

 
    $("#filter-options-ul li").on("click", function() { 
 
    console.log('clicked'); 
 
    var val = $(this).find('span').html(); 
 
    //$('.filter-options').css('border-right', '20px solid' + col); 
 
    $('.dropbtn').html(val); 
 
    }); 
 
});
@media all and (min-width:320px) and (max-width:767px) { 
 
    .c-koh-tabbed-article .koh-article-header { 
 
    border-bottom: none; 
 
    } 
 
    .dropdown { 
 
    position: relative; 
 
    display: block; 
 
    margin-top: 30px; 
 
    margin-bottom: 30px; 
 
    } 
 
    .dropbtn { 
 
    background-color: #fff; 
 
    font-family: Helvetica Neue LT Pro Roman; 
 
    font-size: 14px; 
 
    color: #000; 
 
    width: 100%; 
 
    padding: 15px; 
 
    text-align: left; 
 
    border: 1px solid #e5e5e5; 
 
    cursor: pointer; 
 
    } 
 
    .dropbtn::after { 
 
    content: "e600"; 
 
    font-family: KohlerIcons; 
 
    font-size: 12px; 
 
    width: 16px; 
 
    height: 16px; 
 
    float: right; 
 
    margin-top: 5px; 
 
    box-sizing: border-box; 
 
    } 
 
    .dropdown ul { 
 
    position: relative; 
 
    padding-left: 0px; 
 
    font-weight: 400; 
 
    margin-bottom: 0; 
 
    font-size: 14px 
 
    } 
 
    .dropdown ul li { 
 
    position: relative; 
 
    list-style: none; 
 
    cursor: pointer; 
 
    } 
 
    .dropdown ul li ul { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 9999; 
 
    } 
 
    .dropdown ul li ul { 
 
    padding-left: 0px; 
 
    } 
 
    .dropdown ul li li span { 
 
    font-family: Helvetica Neue LT Pro Roman; 
 
    font-size: 14px; 
 
    color: #000; 
 
    transition: background-color 0.2s ease-in-out; 
 
    -webkit-transition: background-color 0.2s ease-in-out; 
 
    -moz-transition: background-color 0.2s ease-in-out; 
 
    display: block; 
 
    background: #fff; 
 
    padding: 20px 15px; 
 
    border: 1px solid #e5e5e5; 
 
    } 
 
    /* Fallbacks */ 
 
    .dropdown .no-js ul { 
 
    display: none; 
 
    } 
 
} 
 

 
@media all and (min-width:768px) { 
 
    .dropdown { 
 
    display: none; 
 
    } 
 
    .c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set { 
 
    display: table; 
 
    border: none; 
 
    box-shadow: none; 
 
    } 
 
    .c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set li { 
 
    display: table-cell; 
 
    border-bottom: none; 
 
    } 
 
    .button-default { 
 
    font-family: Nexa W01 Heavy !important; 
 
    font-size: 14px !important; 
 
    color: #77777A !important; 
 
    display: inline !important; 
 
    width: 100% !important; 
 
    padding: 0px 20px !important; 
 
    height: 45px !important; 
 
    margin: 0 !important; 
 
    background: #FFF !important; 
 
    border: 1px solid #77777A !important; 
 
    color: #77777A !important; 
 
    border-radius: 0px !important; 
 
    text-transform: uppercase !important; 
 
    } 
 
    .button-default:hover { 
 
    background: #77777A !important; 
 
    color: #FFF !important; 
 
    } 
 
    .button-default.active { 
 
    background: #77777A !important; 
 
    color: #FFF !important; 
 
    } 
 
    .tabcontent { 
 
    margin: 30px 0px; 
 
    text-align: left; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    } 
 
} 
 

 
.c-koh-tabbed-article .koh-article-header .koh-article-title { 
 
    font-family: Nexa W01 Heavy !important; 
 
    font-size: 30px !important; 
 
    color: #000 !important; 
 
    font-weight: bold !important; 
 
} 
 

 
.c-koh-tabbed-article .koh-article-header .koh-article-controls { 
 
    height: auto !important; 
 
} 
 

 
.strong { 
 
    font-family: Nexa W01 XBold !important; 
 
    font-size: 18px !important; 
 
    color: #000 !important; 
 
} 
 

 
.article-sub-text { 
 
    font-family: Helvetica Neue LT Pro Roman !important; 
 
    font-size: 14px !important; 
 
    color: #000 !important; 
 
    font-weight: 400 !important; 
 
} 
 

 
.left-column { 
 
    width: 50%; 
 
    float: left; 
 
    padding-right: 20px; 
 
} 
 

 
.right-column { 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.right-column img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
@media all and (min-width:980px) { 
 
    .tabcontent { 
 
    margin: 30px 0px 30px 10px; 
 
    text-align: left; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    } 
 
    .button-default { 
 
    font-family: Nexa W01 Heavy !important; 
 
    font-size: 14px !important; 
 
    color: #77777A !important; 
 
    display: inline !important; 
 
    width: auto !important; 
 
    padding: 0px 45px !important; 
 
    height: 45px !important; 
 
    margin: 0px 20px 0px 0px !important; 
 
    background: #FFF !important; 
 
    border: 1px solid #77777A !important; 
 
    color: #77777A !important; 
 
    border-radius: 0px !important; 
 
    text-transform: uppercase !important; 
 
    } 
 
    .button-default:last-child { 
 
    margin: 0px !important; 
 
    } 
 
    .button-default:hover { 
 
    background: #77777A !important; 
 
    color: #FFF !important; 
 
    } 
 
    .button-default.active { 
 
    background: #77777A !important; 
 
    color: #FFF !important; 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<section class="c-koh-tabbed-article"> 
 
    <div class="koh-article-container"> 
 
    <div class="koh-article-header"> 
 
     <div class="koh-article-controls"> 
 
     <ul class="koh-article-set"> 
 
      <li><button onclick="testFunction(event,'tab1')" class="button-default tablinks">Blandit</button></li> 
 
      <li><button onclick="testFunction(event,'tab2')" class="button-default tablinks" href="javascript:void(0);">Aliquam</button></li> 
 
      <li><button onclick="testFunction(event,'tab3')" class="button-default tablinks" href="javascript:void(0);">Pharetra Maximus</button></li> 
 
      <li><button onclick="testFunction(event,'tab4')" class="button-default tablinks" href="javascript:void(0);">Tincidunt</button></li> 
 
      <li><button onclick="testFunction(event,'tab5')" class="button-default tablinks" href="javascript:void(0);">Condimentum</button></li> 
 
     </ul> 
 

 
     <div class="dropdown"> 
 
      <ul class="no-js"> 
 
      <li> 
 
       <button id="filter-options" class="dropbtn">Select One</button> 
 
       <ul id="filter-options-ul"> 
 

 
       <li><span>Blandit</span></li> 
 
       <li><span>Aliquam</span></li> 
 
       <li><span>Pharetra Maximus</span></li> 
 
       <li><span>Tincidunt</span></li> 
 
       <li><span>Condimentum</span></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="tab1" class="tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab65695_1800x800?$1800Hero$" alt="Kohler Image"></img> 
 
      </div> 
 
     </div> 
 
     <div id="tab2" class="container tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/aab27241_1800x800" alt="Kohler Image"></img> 
 
      </div> 
 
     </div> 
 
     <div id="tab3" class="tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab80843_rgb?crop=(102,1521,4876,2167)$" alt="Kohler Image"></img> 
 
      </div> 
 
     </div> 
 
     <div id="tab4" class="tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://s3.img-b.com/image/private/t_base,f_auto,c_lpad,h_800/product/Kohler/kohler-k-6331-alternate-image-4-473.jpg" alt="Kohler Image"></img> 
 
      </div> 
 
     </div> 
 
     <div id="tab5" class="tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab42000_1800x800?$1800Hero$" alt="Kohler Image"></img> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

注: - 當你在桌面視圖您可以使用相同的代碼(標籤查看)

+0

這減少了我的標記了很多!我檢查了答案,它工作得很好!即使上面提出的答案也很好! –

+0

@RamjiSeetharaman很高興幫助你的朋友。 –

+0

@Anant - 沒問題!只是答案是直截了當的!想要標記他們兩個接受的答案! –

板凳
0
1

你只需要使用點擊功能就像這樣:

$("#filter-options-ul li").on("click", function(ev) { //notice the ev parameter 
    console.log('clicked'); 
    var val = $(this).find('span').html(); 
    switch(val){ 
     case 'Blandit': 
     testFunction(ev, 'tab1'); // pass the event to the click function 
     break; 
     case 'Aliquam': 
     testFunction(ev, 'tab2'); 
     break; 
     case 'Pharetra Maximus': 
     testFunction(ev, 'tab3'); 
     break; 
     case 'Tincidunt': 
     testFunction(ev, 'tab4'); 
     break; 
     case 'Condimentum': 
     testFunction(ev, 'tab5'); 
     break; 
    } 
    //$('.filter-options').css('border-right', '20px solid' + col); 
    $('.dropbtn').html(val); 
    }); 

這裏是一個演示

function testFunction(evt, tabNumber) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
    tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 
    document.getElementById(tabNumber).style.display = "block"; 
 
    evt.currentTarget.className += " active"; 
 
} 
 

 
$(document).ready(function() { 
 
    $('.dropdown > ul').toggleClass('no-js js'); 
 
    $('.dropdown .js ul').hide(); 
 
    $('.dropdown .js').click(function(e) { 
 
    $('.dropdown .js ul').slideToggle(200); 
 
    $('.dropbtn').toggleClass('active'); 
 
    e.stopPropagation(); 
 
    e.stopPropagation(); 
 
    }); 
 
    if ($('.dropdown .js ul').is(':visible')) { 
 
    $('.dropdown .js ul', this).slideUp(); 
 
    $('.dropbtn').removeClass('active'); 
 
    } 
 

 
    $("#filter-options-ul li").on("click", function(ev) { 
 
    console.log('clicked'); 
 
    var val = $(this).find('span').html(); 
 
    //console.log(ev); 
 
    //return; 
 
    switch(val){ 
 
     case 'Blandit': 
 
     testFunction(ev, 'tab1'); 
 
     break; 
 
     case 'Aliquam': 
 
     testFunction(ev, 'tab2'); 
 
     break; 
 
     case 'Pharetra Maximus': 
 
     testFunction(ev, 'tab3'); 
 
     break; 
 
     case 'Tincidunt': 
 
     testFunction(ev, 'tab4'); 
 
     break; 
 
     case 'Condimentum': 
 
     testFunction(ev, 'tab5'); 
 
     break; 
 
    } 
 
    //$('.filter-options').css('border-right', '20px solid' + col); 
 
    $('.dropbtn').html(val); 
 
    }); 
 
});
@media all and (min-width:320px) and (max-width:767px) { 
 
    .c-koh-tabbed-article .koh-article-header { 
 
    border-bottom: none; 
 
    } 
 
    .dropdown { 
 
    position: relative; 
 
    display: block; 
 
    margin-top: 30px; 
 
    margin-bottom: 30px; 
 
    } 
 
    .dropbtn { 
 
    background-color: #fff; 
 
    font-family: Helvetica Neue LT Pro Roman; 
 
    font-size: 14px; 
 
    color: #000; 
 
    width: 100%; 
 
    padding: 15px; 
 
    text-align: left; 
 
    border: 1px solid #e5e5e5; 
 
    cursor: pointer; 
 
    } 
 
    .dropbtn::after { 
 
    content: "e600"; 
 
    font-family: KohlerIcons; 
 
    font-size: 12px; 
 
    width: 16px; 
 
    height: 16px; 
 
    float: right; 
 
    margin-top: 5px; 
 
    box-sizing: border-box; 
 
    } 
 
    .dropdown ul { 
 
    position: relative; 
 
    padding-left: 0px; 
 
    font-weight: 400; 
 
    margin-bottom: 0; 
 
    font-size: 14px 
 
    } 
 
    .dropdown ul li { 
 
    position: relative; 
 
    list-style: none; 
 
    cursor: pointer; 
 
    } 
 
    .dropdown ul li ul { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 9999; 
 
    } 
 
    .dropdown ul li ul { 
 
    padding-left: 0px; 
 
    } 
 
    .dropdown ul li li span { 
 
    font-family: Helvetica Neue LT Pro Roman; 
 
    font-size: 14px; 
 
    color: #000; 
 
    transition: background-color 0.2s ease-in-out; 
 
    -webkit-transition: background-color 0.2s ease-in-out; 
 
    -moz-transition: background-color 0.2s ease-in-out; 
 
    display: block; 
 
    background: #fff; 
 
    padding: 20px 15px; 
 
    border: 1px solid #e5e5e5; 
 
    } 
 
    /* Fallbacks */ 
 
    .dropdown .no-js ul { 
 
    display: none; 
 
    } 
 
} 
 

 
@media all and (min-width:768px) { 
 
    .dropdown { 
 
    display: none; 
 
    } 
 
    .c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set { 
 
    display: table; 
 
    border: none; 
 
    box-shadow: none; 
 
    } 
 
    .c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set li { 
 
    display: table-cell; 
 
    border-bottom: none; 
 
    } 
 
    .button-default { 
 
    font-family: Nexa W01 Heavy !important; 
 
    font-size: 14px !important; 
 
    color: #77777A !important; 
 
    display: inline !important; 
 
    width: 100% !important; 
 
    padding: 0px 20px !important; 
 
    height: 45px !important; 
 
    margin: 0 !important; 
 
    background: #FFF !important; 
 
    border: 1px solid #77777A !important; 
 
    color: #77777A !important; 
 
    border-radius: 0px !important; 
 
    text-transform: uppercase !important; 
 
    } 
 
    .button-default:hover { 
 
    background: #77777A !important; 
 
    color: #FFF !important; 
 
    } 
 
    .button-default.active { 
 
    background: #77777A !important; 
 
    color: #FFF !important; 
 
    } 
 
    .tabcontent { 
 
    margin: 30px 0px; 
 
    text-align: left; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    } 
 
} 
 

 
.c-koh-tabbed-article .koh-article-header .koh-article-title { 
 
    font-family: Nexa W01 Heavy !important; 
 
    font-size: 30px !important; 
 
    color: #000 !important; 
 
    font-weight: bold !important; 
 
} 
 

 
.c-koh-tabbed-article .koh-article-header .koh-article-controls { 
 
    height: auto !important; 
 
} 
 

 
.strong { 
 
    font-family: Nexa W01 XBold !important; 
 
    font-size: 18px !important; 
 
    color: #000 !important; 
 
} 
 

 
.article-sub-text { 
 
    font-family: Helvetica Neue LT Pro Roman !important; 
 
    font-size: 14px !important; 
 
    color: #000 !important; 
 
    font-weight: 400 !important; 
 
} 
 

 
.left-column { 
 
    width: 50%; 
 
    float: left; 
 
    padding-right: 20px; 
 
} 
 

 
.right-column { 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.right-column img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
@media all and (min-width:980px) { 
 
    .tabcontent { 
 
    margin: 30px 0px 30px 10px; 
 
    text-align: left; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    } 
 
    .button-default { 
 
    font-family: Nexa W01 Heavy !important; 
 
    font-size: 14px !important; 
 
    color: #77777A !important; 
 
    display: inline !important; 
 
    width: auto !important; 
 
    padding: 0px 45px !important; 
 
    height: 45px !important; 
 
    margin: 0px 20px 0px 0px !important; 
 
    background: #FFF !important; 
 
    border: 1px solid #77777A !important; 
 
    color: #77777A !important; 
 
    border-radius: 0px !important; 
 
    text-transform: uppercase !important; 
 
    } 
 
    .button-default:last-child { 
 
    margin: 0px !important; 
 
    } 
 
    .button-default:hover { 
 
    background: #77777A !important; 
 
    color: #FFF !important; 
 
    } 
 
    .button-default.active { 
 
    background: #77777A !important; 
 
    color: #FFF !important; 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<section class="c-koh-tabbed-article"> 
 
    <div class="koh-article-container"> 
 
    <div class="koh-article-header"> 
 
     <div class="koh-article-controls"> 
 
     <ul class="koh-article-set"> 
 
      <li><button onclick="testFunction(event,'tab1')" class="button-default tablinks">Blandit</button></li> 
 
      <li><button onclick="testFunction(event,'tab2')" class="button-default tablinks" href="javascript:void(0);">Aliquam</button></li> 
 
      <li><button onclick="testFunction(event,'tab3')" class="button-default tablinks" href="javascript:void(0);">Pharetra Maximus</button></li> 
 
      <li><button onclick="testFunction(event,'tab4')" class="button-default tablinks" href="javascript:void(0);">Tincidunt</button></li> 
 
      <li><button onclick="testFunction(event,'tab5')" class="button-default tablinks" href="javascript:void(0);">Condimentum</button></li> 
 
     </ul> 
 

 
     <div class="dropdown"> 
 
      <ul class="no-js"> 
 
      <li> 
 
       <button id="filter-options" class="dropbtn">Select One</button> 
 
       <ul id="filter-options-ul"> 
 

 
       <li><span>Blandit</span></li> 
 
       <li><span>Aliquam</span></li> 
 
       <li><span>Pharetra Maximus</span></li> 
 
       <li><span>Tincidunt</span></li> 
 
       <li><span>Condimentum</span></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="tab1" class="tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab65695_1800x800?$1800Hero$" alt="Kohler Image"></img> 
 
      </div> 
 
     </div> 
 
     <div id="tab2" class="container tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/aab27241_1800x800" alt="Kohler Image"></img> 
 
      </div> 
 
     </div> 
 
     <div id="tab3" class="tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab80843_rgb?crop=(102,1521,4876,2167)$" alt="Kohler Image"></img> 
 
      </div> 
 
     </div> 
 
     <div id="tab4" class="tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://s3.img-b.com/image/private/t_base,f_auto,c_lpad,h_800/product/Kohler/kohler-k-6331-alternate-image-4-473.jpg" alt="Kohler Image"></img> 
 
      </div> 
 
     </div> 
 
     <div id="tab5" class="tabcontent" style="display:none;"> 
 
      <div class="left-column"> 
 
      <span class="strong"> This is the heading of the tabbed component and will be in bold</span> 
 
      <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps 
 
       to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p> 
 
      <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually 
 
       has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found 
 
       in the original.</p> 
 

 
      </div> 
 
      <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab42000_1800x800?$1800Hero$" alt="Kohler Image"></img> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

+0

清楚點! –

地板
0
1

那麼你也可以在使用onclick事件您的下拉列表中的元素可實現移動視圖的相同結果。

<ul id="filter-options-ul"> 
    <li><span onclick="testFunction(event,'tab1')>Aliquam</span></li> 
    . . . 
</ul> 
432
votes
answers
8 views
+10

How to use FormData for ajax file upload

This is my html which I'm generating dynamically using drag and drop functionality.

<form method="POST" id="contact" name="13" class="form-horizontal wpc_contact" novalidate="novalidate" enctype="multipart/form-data">
<fieldset>
    <div id="legend" class="">
        <legend class="">file demoe 1</legend>
        <div id="alert-message" class="alert hidden"></div>
    </div>

    <div class="control-group">
        <!-- Text input-->
        <label class="control-label" for="input01">Text input</label>
        <div class="controls">
            <input type="text" placeholder="placeholder" class="input-xlarge" name="name">
            <p class="help-block" style="display:none;">text_input</p>
        </div>
        <div class="control-group">  </div>
        <label class="control-label">File Button</label>

        <!-- File Upload --> 
        <div class="controls">
            <input class="input-file" id="fileInput" type="file" name="file">
        </div>
    </div>
    <div class="control-group">    

        <!-- Button --> 
        <div class="controls">
            <button class="btn btn-success">Button</button>
        </div>
    </div>
</fieldset>
</form> 

this is my js code...

<script>
    $('.wpc_contact').submit(function(event){
        var formname = $('.wpc_contact').attr('name');
        var form = $('.wpc_contact').serialize();               
        var FormData = new FormData($(form)[1]);

        $.ajax({
            url : '<?php echo plugins_url(); ?>'+'/wpc-contact-form/resources/js/tinymce.php',
            data : {form:form,formname:formname,ipadd:ipadd,FormData:FormData},
            type : 'POST',
            processData: false,
            contentType: false,
            success : function(data){
            alert(data); 
            }
        });
   }
up vote 384 down vote accepted favorite
沙发
+3840
+50
<p>要獲得正確的表單數據使用,您需要執行2個步驟。</ p> <p> <strong>準備工作</ strong> </ p> <p>您可以將整個表單提供給FormData()進行處理</ p> <pre> <code> var form = $('形式')[0]; //你需要在這裡使用標準的javascript對象var formData = new FormData(form); </ code> </ pre> <p>或指定FormData()的精確數據</ p> <pre> <code> var formData = new FormData(); formData.append('section','general'); formData.append('action','previewImg'); //附加文件formData.append('image',$('input [type = file]')[0] .files [0]); </ code> </ pre> <p> <strong>發送表單</ strong> </ p> <p>使用jquery的Ajax請求如下所示:</ p> < pre> <code> $ .ajax({url:'你的網址在這裡',數據:formData,類型:'POST',contentType:false,//需要,不要這樣(需要jQuery 1.6+)processData:false ,//需要,不要討論這個// ...其他選擇,如成功等}}; </ code> </ pre> <p>在此之後,它將發送ajax請求,就像你提交常規表單一樣<code> enctype =“multipart / form-data”</ code> </ p> <p>更新:這個如果沒有<code>類型:“POST”</ code>,則請求無法工作,因為所有文件都必須通過POST請求發送。</ p> <p> <strong>注意:</ strong> <code> contentType:false </ code>僅可用<a href =“http://api.jquery.com/jQuery.ajax/”rel =來自jQuery 1的“noreferrer”>

我可以在Ajax調用中設置“enctype”嗎?我想我可能有問題。或者,我可以在FormData對像上設置它嗎? - Wouter 2014年6月1日7:50

您可以。為此,在我的代碼中必須完成文件上傳後才能查看行。 - 拼寫於2014年6月2日12:37

如何在服務器端收集數據... - Rahul Matte 16年4月28日在10:43

@Spell如何在控制器中獲取數據?需要發送getCsrfToken嗎? - ЮрийСветлов2016年5月22日16:11

@ManthanJamdagni當你得到$('form')時,它將返回jQuery對象。但是我們需要常規的js對象,而不需要jQuery功能。這就是我們用[0]表示法得到常規對象的原因。您可以調用document.getElementById()或simular調用,而不是這種結構。 - 拼寫於18年10月22日8:31

+310
<p>我無法在上面添加評論,因為我沒有足夠的聲譽,但上述答案對我來說幾乎是完美的,除了我必須添加</ p> <p>類型:“POST”</ p> <p>到.ajax電話。我試著弄清楚自己做錯了什麼,這是我所需要的一切,並且是一種享受。所以這就是整個片段:</ p> <p>完全贊同我上面的答案,這只是一個小小的調整。這是為了防萬一其他人卡住而且看不到明顯的。</ p> <pre> <code> $ .ajax({url:'你的網址在這裡',數據:formData,類型:“POST”, //添加此行//必須完成文件上傳內容類型:false,processData:false,// ...其他選項如成功等}} </ code>
+170
<pre> <code>&lt; form id =“upload_form”enctype =“multipart / form-data”&gt; </ code> </ pre> <p>使用CodeIgniter文件上傳的jQuery:</ p> <pre> <code> var formData = new FormData($('#upload_form')[0]); formData.append('tax_file',$('input [type = file]')[0] .files [0]); $ .ajax({type:“POST”,url:base_url +“member / upload /”,data:formData,//使用contentType,processData肯定.contentType:false,processData:false,beforeSend:function(){$ ('.modal .ajax_data')。prepend('&lt; img src =“'+ base_url +'”asset / images / ajax-loader.gif“/&gt;'); //$(”。modal .ajax_data“ ).html(“&lt; pre&gt; Hold on ...&lt; var formData = new FormData($('#upload_form')[0]); formData.append('tax_file',$('input [type = file]')[0] .files [0]); </ code> </ pre> <p>兩者都可以。</ p>
0
<pre> <code>查看:&lt; label class =“btn btn-info btn-file”&gt; 導入&lt; input type =“file”style =“display:none;”&gt; &LT; /標籤&gt; &LT;腳本&GT; $(document).ready(function(){$(document).on('change',':file',function(){var fileUpload = $(this).get(0); var files = fileUpload.files ; var bid = 0; if(files.length!= 0){var data = new FormData(); for(var i = 0; i&lt; files.length; i ++){data.append(files [i]。 name,files [i]);} $ .ajax({xhr:function(){var xhr = $。ajaxSettings.xhr(); xhr.upload.onprogress = function(e){console.log(Math.floor(e.loaded / e.total * 100)+'%'); }; 返回xhr; },contentType:false,processData:false,輸入:'POST',data:data,url:'/ ControllerX /'+ bid,success:function(response){location.href ='xxx / Index /'; }}; }}; }); &LT; / SCRIPT&GT; 控制器:[HttpPost] public ActionResult ControllerX(string id){var files = Request.Form.Files; ...... </ code> </ pre>

通常認為提供解釋和答案是好的形式。 - ouflak 2016年10月27日19:42

0
“OK”,closeOnConfirm:false},function(){window.location.href ='/ tripaction.php'; }); } else if(returndata =='Offline'){sweetAlert(“離線”,“請使用其他付款方式”,“錯誤”); }}}; }); </代碼> </ PRE>
0

實際上文檔顯示您可以使用 XMLHttpRequest()。send()來簡單地發送多形式數據,以防jquery糟透了

-10

早上好。

上傳多張圖片時遇到了同樣的問題。解決方案比我想像的更簡單:在名稱字段中包含[]。

 &lt; input type =“file”name =“files []”multiple&gt;   

我沒有對FormData進行任何修改。

這與問題所詢問的問題無關,而且僅僅是PHP如何使用具有相同名稱的多個值處理表單數據的特性。 - 昆汀4月24日15:17

0
votes
answers
13 views
+10

如何在輸入表格中輸入字段是必需的

-2

我想輸出「字段是必需的」或輸入框或佔位符內的最小長度錯誤消息,並通過jQuery使框顏色變爲紅色。我有我的表單和驗證工作,但消息在盒子下面出現,看起來很醜陋,並在表單中造成一些混亂。如何在輸入表格中輸入字段是必需的

我的代碼:

<form action="" method="POST" id="login_form"> 
    <div class="form-group has-feedback"> 
    <input type="username" name="username" id="username" class="form-control" placeholder="username" ><span class="glyphicon glyphicon-envelope form-control-feedback"></span> 

    </div> 
    <div class="form-group has-feedback"> 
    <input type="password" name="password" id= "password" class="form-control" placeholder="Password"> 

    <span class="glyphicon glyphicon-lock form-control-feedback"></span> 
    </div> 
    <div class="row"> 
    <div class="col-xs-8"> 

    </div> 
    <!-- /.col --> 
    <div class="col-xs-4"> 
     <button type="submit" class="btn btn-primary btn-block btn-flat"name="login">Sign In</button> 
    </div> 
    <!-- /.col --> 
    </div> 
</form> 

jQuery代碼:

<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('form').validate({ 
      rules: { 
       username: { 
        required: true, 
        minlength: 5 
       }, 
       password: { 
        required: true, 
        minlength: 5 
       }, 

      }, 
        }); 
    }); 
</script> 

enter image description here

+0

這有什麼錯 「必需的」 屬性? –

+0

更改錯誤消息元素的css。在瀏覽器開發工具樣式檢查器中檢查它們並在那裏調整以測試然後更新您的樣式表 – charlietfl

沙发
0
0

您可以定義爲.error類的CSS然後onkeyup檢測爲input.error爲去除錯誤的標籤看到的代碼片段:

$(document).ready(function() { 
 
      $('form').validate({ 
 
       rules: { 
 
        username: { 
 
         required: true, 
 
         minlength: 5 
 
        }, 
 
        password: { 
 
         required: true, 
 
         minlength: 5 
 
        }, 
 
    
 
       }, 
 
         }); 
 
         $(document).on("keyup", "input.error", function(){ 
 
    $("label[for='"+$(this).attr('id')+"']").hide(); 
 
}); 
 
     });
.form-group { 
 
position:relative; 
 
} 
 
label.error{ 
 
position:absolute; 
 
top:0px; 
 
left:0px; 
 
background-color:#fff; 
 
color:red; 
 
} 
 
input.error{ 
 
border:1px solid red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script> 
 
<form action="" method="POST" id="login_form"> 
 
     <div class="form-group has-feedback"> 
 
     <input type="username" name="username" id="username" class="form-control" placeholder="username" ><span class="glyphicon glyphicon-envelope form-control-feedback"></span> 
 

 
     </div> 
 
     <div class="form-group has-feedback"> 
 
     <input type="password" name="password" id= "password" class="form-control" placeholder="Password"> 
 

 
     <span class="glyphicon glyphicon-lock form-control-feedback"></span> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-8"> 
 

 
     </div> 
 
     <!-- /.col --> 
 
     <div class="col-xs-4"> 
 
      <button type="submit" class="btn btn-primary btn-block btn-flat"name="login">Sign In</button> 
 
     </div> 
 
     <!-- /.col --> 
 
     </div> 
 
    </form>